vue 上传图片进行压缩图片

afterRead(file){
             if(this.fileList.length > 1){
                 this.fileList.splice(1);
                 this.$msg({
                     text:'只能选择这么多!',
                     type:'info'
                 })
                 return false;
             }
            
            let maxSize = 1 * 1024 * 1024;  //自己定义的文件大小，超过多少M就开始压缩(现在是1M)
            let fileObj = file.file;  // 当前的图片
             if (fileObj.size > maxSize) {
                this.imgcompress(fileObj, file);
            }else{
                 //没有大于1兆直接执行
                 let Files = this.Files;
                 Files.push(file.file);
            } 
        },

 imgcompress(file, files) {
    const img = document.createElement('img')
    const reader = new FileReader(); // 读取文件资源实例
    reader.readAsDataURL(file);   //读取图片资源
    reader.onload = e => {        //读取成功
        img.src = e.target.result;
        const { width: originWidth, height: originHeight } = img; //上传的图片的宽高
        const maxWidth = 1000, //设置一个canvas 的最大宽高
        maxHight = 1000;
        if (originWidth > maxWidth || originHeight > maxHight) {
        //计算出图片的缩放比例
        if (originWidth > originHeight) {
            //宽 大于 高
            const Proportion = Math.ceil(originWidth / maxWidth);
            let targetWidht = parseInt(originWidth / Proportion); //目标的宽度
            let targetHeight = parseInt(originHeight / Proportion); //目标的高度

            this.createCanvasCompress(targetWidht, targetHeight, img, files);
        } else {
            const Proportion = Math.ceil(originHeight / maxHight); //高大于宽
            let targetWidht = parseInt(originWidth / Proportion); //目标的宽度
            let targetHeight = parseInt(originHeight / Proportion); //目标的高度
            let bold = this.createCanvasCompress(
            targetWidht,
            targetHeight,
            img,
            files
            );
        }
    } else {
      let quality = 0.8;
      this.createCanvasCompress(
        originWidth,
        originHeight,
        img,
        files,
        quality
      );
    }
  };
},

 createCanvasCompress(targetWidth, targetHeight, img, files, quality) {
  let that = this;
  return new Promise((resolve, reject) => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    // 设置宽高度为等同于要压缩图片的尺寸
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    context.clearRect(0, 0, targetWidth, targetHeight);
    //将img绘制到画布上
    console.log(targetWidth, targetHeight);
    context.drawImage(img, 0, 0, targetWidth, targetHeight);

    let bold = canvas.toBlob(
      function(blob) {
        resolve(blob);
        that.Files.push(blob); //压缩之后的图片
        //拿到的是blob格式的图片，需要把blob格式转换为file格式
        let files1 = new window.File([blob], files.file.name, {type: files.file.type})
        console.log（files1 ）
      },
      "image/png",
      quality
    );
  });
  // 创建画布
},