vue实现拍照上传 + base64 上传功能

Posted 2020-11-27 chaihtml

<style>
  .head_pic{
    width: 200px;
    height: 200px;
    background: #fff;
   /* border: 1px solid #e1e1e1; */
    border-radius: 8px;
    margin: 10px auto;
    overflow: hidden;
  }


  .head_pic img{
    width: 100%;
    height: 100%;
  }

  .upload_warp_text span{
    display: block;
    font-size: 14px;
    line-break: 36px;
    color: #666;
    padding-left: 20px;
  }


  .upload_warp_buttonPic i{
    display: inline-block;
    font-size: 14px;
    line-height: 26px;
    color: #fff;
    font-style: normal;
    background: #1aad19;
    border-radius: 4px;
    padding: 4px 10px;
    position: relative;

  }
  .upload_warp_buttonPic{
    padding:10px 20px;
  }
  .upload_warp_buttonPic input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .upload_warp_button{
    position: fixed;
    bottom: 86px;
    left: 20px;
    right: 20px;
  }

    .upload_warp_button button{
      width: 100%;
      background: #1aad19;
      border: 0;
      border-radius: 4px;
      font-size: 18px;
      line-height: 36px;
      color: #fff;
    }
</style>
<template>

   <div>
      <selector placeholder="请选择小区" v-model="demo" title="小区" :options="shequ"></selector>
      <div class="upload_warp_buttonPic">
          <i>选择文件</i>
          <input id="upload_file" type="file" style="" accept=‘image/*‘ name="file"  @change="fileChange($event)"/>
        </div>
         <div class="upload_warp_text">
          <span>选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}</span>
        </div>
     <div class="head_pic">
        <div class="upload_warp">
      <div class="upload_warp_img">
        <div class="upload_warp_img_div"  v-for="(item,index) in imgList" :key="index">
          <!-- <div class="upload_warp_img_div_top">
            <img src="" class="upload_warp_img_div_del" @click="fileDel(index)">
          </div> -->
          <img :src="item.file.src" style="display: inline-block;">
        </div>
        <!-- <div class="upload_warp_left" id="upload_warp_left" @click="fileClick()" v-if="this.imgList.length < 6">
          <img src="../assets/upload.png">
          <img src="" class="imgs"/>
        </div> -->
      </div>
    </div>
   
     </div>

       <div class="upload_warp_button">
         <x-button style="margin-top:10px;" type="primary" action-type="button" @click.native="commit">保存</x-button>
          <!-- <button  @click="commit()">确认</button> -->
        </div>
    <div class="image-item space" @click="showActionSheet()">
      <div class="image-up"></div>
    </div>
  </div>
</template>
<script  type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/ecmascript-6">
import {
  Box,
  Toast
} from ‘vux‘
    export default {
      name: "cameras-and-albums",
      data(){
        return{
          imgList: [],
          datas: new FormData(),
          files:0,
          demo:0,
          file:‘‘,
          shequ:[],
          download:[],
          size:0
        }
      },
    mounted: function() {
         this.$api.getcomm_list().then((res) => {
           console.log(res)
            let data = res.data
            this.shequ = data
         })
      },
      methods:{
        onHide() {
          this.$router.push({
            name: ‘HomeIndex‘
          })
      },
        //调用相册&相机
        fileClick() {
          $(‘#upload_file‘).click();
        },
        //调用手机摄像头并拍照
        getImage() {
          let cmr = plus.camera.getCamera();
          cmr.captureImage(function(p) {
            plus.io.resolveLocalFileSystemURL(p, function(entry) {
              compressImage(entry.toLocalURL(),entry.name);
            }, function(e) {
              plus.nativeUI.toast("读取拍照文件错误：" + e.message);
            });
          }, function(e) {
          }, {
            filter: ‘image‘
          });
        },
        //从相册选择照片
        galleryImgs() {
          plus.gallery.pick(function(e) {
            let name = e.substr(e.lastIndexOf(‘/‘) + 1);
            compressImage(e,name);
          }, function(e) {
          }, {
            filter: "image"
          });
        },
        //点击事件，弹出选择摄像头和相册的选项
        showActionSheet() {
          let bts = [{
            title: "拍照"
          }, {
            title: "从相册选择"
          }];
          plus.nativeUI.actionSheet({
              cancel: "取消",
              buttons: bts
            },
            function(e) {
              if (e.index == 1) {
                this.getImage();
              } else if (e.index == 2) {
                this.galleryImgs();
              }
            }
          );
        },
        fileChange(el) {
          this.files= document.getElementById("upload_file").files;
          console.log(this.files);
          for(let i=0;i<this.files.length;i++){
            this.datas.append("file",this.files[i]);
          }
          this.show1=false;
          console.log(typeof this.files);
          console.log(this.files);
          if (!el.target.files[0].size) return;
          this.fileList(el.target);
          el.target.value = ‘‘
        },
        fileList(fileList) {
          let files = fileList.files;
          for (let i = 0; i < files.length; i++) {
            //判断是否为文件夹
            if (files[i].type != ‘‘) {
              this.fileAdd(files[i]);
            } else {
              //文件夹处理
              this.folders(fileList.items[i]);
            }
          }
        },
        //文件夹处理
        folders(files) {
          let _this = this;
          //判断是否为原生file
          if (files.kind) {
            files = files.webkitGetAsEntry();
          }
          files.createReader().readEntries(function (file) {
            for (let i = 0; i < file.length; i++) {
              if (file[i].isFile) {
                _this.foldersAdd(file[i]);
              } else {
                _this.folders(file[i]);
              }
            }
          })
        },
        fileAdd(file) {
          let _this = this;
          //总大小
          this.size = this.size + file.size;
          //判断是否为图片文件
          if (file.type.indexOf(‘image‘) == -1) {
            file.src = ‘wenjian.png‘;
            this.imgList.push({
              file
            });
           this.file=file
          
          } else {
            let reader = new FileReader();
            reader.vue = this;
            reader.readAsDataURL(file);
            reader.onload = function () {
              file.src = this.result;
              this.vue.imgList.push({
                file
              });
            }
          }
//图片转为base64编码
          this.file=file
           console.log(‘11111‘,this.file)
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function (e) {
               var imgcode = reader.result
            //  console.log(‘111111‘,imgcode)
              _this.download.push(imgcode)
            }
        },
//提交
        commit() {
            var storage = window.sessionStorage
            var str = storage.getItem("user");  
            console.log(str)
            var user = JSON.parse( str );
            let imgcode = this.download
            console.log(imgcode)
            let that = this
            if(this.demo===0){
              alert(‘请选择小区‘)
              return false
            }
            this.$api.fase_wxupload(imgcode,user,this.demo).then((res) => {
              if(imgcode){
                  alert(‘上传成功‘)
              }
              var data = res.data
              if (data[‘status‘] === 1) {
                that.show2 = true
              } else if (data[‘status‘ === 2]) {
                that.content = ‘上传失败，请重试或联系网站管理员！‘
                that.show2 = true
              } else if (data[‘status‘] === 99) {
                that.title = ‘抱歉‘
                that.content = ‘请先登陆再操作！‘
                that.show2 = true
              }
            })
        },
        fileDel(index) {
          this.size = this.size - this.imgList[index].file.size;//总大小
          this.imgList.splice(index, 1);
        },
        bytesToSize(bytes) {
          if (bytes === 0){
            return ‘0 B‘;
          }
          let k = 1000, // or 1024
            sizes = [‘B‘, ‘KB‘, ‘MB‘, ‘GB‘, ‘TB‘, ‘PB‘, ‘EB‘, ‘ZB‘, ‘YB‘],
            i = Math.floor(Math.log(bytes) / Math.log(k));
          return (bytes / Math.pow(k, i)).toPrecision(3) + ‘ ‘ + sizes[i];
        },
        dragenter(el) {
          el.stopPropagation();
          el.preventDefault();
        },
        dragover(el) {
          el.stopPropagation();
          el.preventDefault();
        },
        drop(el) {
          el.stopPropagation();
          el.preventDefault();
          this.fileList(el.dataTransfer);
        },
        shows(et,tx){
          this.strut=et;
          this.txt=tx;
        },
        handleClick(){
          this.$store.commit(‘add‘)
        },
      },
    }
</script>