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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

<br>// 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         }     },