Upload 图片文件转base64， base64文件转file

　　如何将上传的文件获取，然后调整大小后，再通过接口将目标大小的图片返回给后端呢

// vue

<n-upload style="visibility: hidden; position: absolute; z-index: -1" :default-upload="false" @before-upload="beforeUpload" @change="handleChange">
      <n-button class="submitBn">上传文件</n-button>
    </n-upload>



// js
// file 转  base 64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
// 获取生成的文件
    handleChange(file) {
      this.getBase64(file.file.file).then((res) => {
        this.imgOldFileBox = res; // 保存未修改的base64文件
        this.getImgFile() // 获取目标文件
      });
    },

// 修改图片大小，并将 base64 转file
    getImgFile(){
      var that = this
      if(this.imgOldFileBox === ''){
        return
      }
      var canvas = document.createElement("canvas"); // 创建canvas对象
      var ctx = canvas.getContext('2d');
      var image = new Image();
        image.src = `${this.imgOldFileBox}`;
        image.onload = function () {
            // 设置目标图宽高
            var width = 520;
            var height = 520;
            //设置canvas大小与原图宽高一致
            canvas.height = height;
            canvas.width = width;
            // 在canvas绘制图片
            ctx.drawImage(this, 0, 0, width, height);
            // 截图：
            // 获取截图区域内容,截图区域的像素点矩阵
            var cutImage = ctx.getImageData(0, 0, width, height);
            // 裁剪后的base64数据
            var newImage = that.createNewCanvas(cutImage, width, height);
            let blob = that.dataURLtoBlob(newImage)
            var file = that.blobToFile(blob, '999.png');		// blob -> file	
            that.imgFileBox = file  //  新文件的file
        }
    },