vant&uploader :after-read :before-read 压缩图片

声明：部分代码为转载，找不到原创链接了，只是为了记录学习的过程，非恶意，如有不适请联系。

上传图片后进行压缩再传到服务器，代码如下

<van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="1" />

  主方法： 

afterRead(File) {
        let file = File.file
        let self = this;
        // 看支持不支持FileReader
        if (!file || !window.FileReader) return;
        let reader = new FileReader();
        // 将图片2将转成 base64 格式
        reader.readAsDataURL(file);
        // 读取成功后的回调
        reader.onloadend = function() {
          //此处的this是reader
          //此处的result是个base64文件
          let result = this.result;
          // 还原成图片格式方便后期压缩，此处可以不还原，在压缩的时候还原
          let img = new Image();
          img.src = result;
          console.log(img)
          //判断图片是否大于500K,是就直接上传，反之压缩图片
          if (this.result.length <= 500 * 1024) {
            self.cusContent = result;
            self.uploadId(result)
          } else {
            img.onload = function() {
            let base64 = self.compress(img);
            self.uploadId(base64)
            };
          }

        };
      },

  压缩图片 ：

compress(img) {
        console.log("3、正在压缩")
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        //瓦片canvas
        let tCanvas = document.createElement("canvas");
        let tctx = tCanvas.getContext("2d");
        let width = img.width;
        let height = img.height;
        //若是图片大于四百万像素，计算压缩比并将大小压至400万如下
        let ratio;
        if ((ratio = (width * height) / 4000000) > 1) {
          ratio = Math.sqrt(ratio);
          width /= ratio;
          height /= ratio;
        } else {
          ratio = 1;
        }
        canvas.width = width;
        canvas.height = height;
        //铺底色
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //若是图片像素大于100万则使用瓦片绘制
        let count;
        if ((count = (width * height) / 1000000) > 1) {
          // console.log("超过100W像素"); ~~ 是利于符号转换成数字类型
          count = ~~(Math.sqrt(count) + 1); //计算要分红多少块瓦片
          //      计算每块瓦片的宽和高
          let nw = ~~(width / count);
          let nh = ~~(height / count);
          tCanvas.width = nw;
          tCanvas.height = nh;
          for (let i = 0; i < count; i++) {
            for (let j = 0; j < count; j++) {
              tctx.drawImage(
                  img,
                  i * nw * ratio,
                  j * nh * ratio,
                  nw * ratio,
                  nh * ratio,
                  0,
                  0,
                  nw,
                  nh
              );
              ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
            }
          }
        } else {
          ctx.drawImage(img, 0, 0, width, height);
        }
        //进行最小压缩
        let ndata = canvas.toDataURL("image/jpeg", 0.3);
        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
        // console.log(ndata,'压缩后的base64');
        return ndata
      }

 上传到服务器 

 uploadId(base){
        //此时可以自行将文件上传至服务器
        let forms = new FormData()
        forms.append('base',base.replace(/data.+?;base64,/, ""))
        // forms.append('type','data:'+file.file.type+';base64,')
        axios({
          url:'ocr/id',
          method:'post',
          data:forms,
          headers: {'Content-Type': 'multipart/form-data'}
        }).then((res)=>{
          this.$dialog.alert({
            message: '身份证上传成功！',
          })
        }).catch((error)=>{
        })
      },

tip   :before-read与:after-read 获取到的file值是不一样的 

        :before-read 获取到的是一个file值，如下

        

        :after-read 获取到的是一个对象，包含了base64，如下