input上传图片前压缩

随着现在手机的拍照越来越高清，图片也越来越大，我们在开发的过程中，有时是不需要原图的，那么就需要我们上传前把图片压缩一下，后端存储base64也就不会太大，那么废话不多说，直接上代码 

<template>
  <div class="faceVerification">
    <div class="next">
      <div class="btn">
        人脸验证
        <input id="upfile" type="file" accept="image/*" capture="camera" class="abc" @change="fileUpload">
      </div>
     
    </div>
  </div>
</template>

<script>

export default {
 
  data(){
    return{

    }
  },
  mounted(){
    
  },
  methods:{
  
    fileUpload(){
      let file = document.getElementById('upfile');
      let fileName = file.value;
      let files = file.files;
      this.beforeRead(files[0])
    },
    //上传前压缩图片
    async beforeRead(file){//async await 解决异步问题，
      var formData = new FormData();//创建新的form
      let f = await this.compressImg(file)
      formData.set('file',f)
        const toast = this.$toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: "识别中..."
          });
    　　this.$api.upload(formData).then(res => {//将formDate文件上传到服务器，会返回图片地址
          if(res.code==200){
          this.$api.faceCompare({imgUrl:res.fileFullUrl}).then(result=>{
              this.$toast.clear();
            if(result.code==200){
              this.selectQuery()
            }
          }).catch(error=>{
            this.$toast.clear();
          })
          }
    　　}).catch(error=>{
          this.$toast.clear();
      });
    },
    //回调函数返回file的值（将base64编码转成file）
    dataURLtoFile(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], { type: mimeString });
      },
      //图片压缩
    compressImg(file){
      var _this=this
      var src;
      var files;
      var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);
      var read = new FileReader();
      read.readAsDataURL(file);
      return new Promise(function(resolve, reject){
      read.onload = function (e) {
        var img = new Image();
        img.src = e.target.result;
        img.onload = function(){
          //默认按比例压缩
          var w = this.width,
            h = this.height;
          //生成canvas
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          var base64;
          // 创建属性节点
          canvas.setAttribute("width", w);
          canvas.setAttribute("height", h);
          ctx.drawImage(this, 0, 0, w, h);
          if(fileSize<1){
            //如果图片小于一兆 那么不执行压缩操作
            base64 = canvas.toDataURL(file['type'], 1);
          }else if(fileSize>1&&fileSize<2){
            //如果图片大于1M并且小于2M 那么压缩0.5
            base64 = canvas.toDataURL(file['type'], 0.5);
          }else{
            //如果图片超过2m 那么压缩0.2
            base64 = canvas.toDataURL(file['type'], 0.2);
          }
          // 回调函数返回file的值（将base64编码转成file）
          files = _this.dataURLtoFile(base64); //如果后台接收类型为base64的话这一步可以省略
          resolve(files)
        };
      };
      })
    }

  }
}
</script>

<style lang="scss" scoped>

</style>