vue中實現圖片壓縮 file文件的方法

項目中遇到上傳圖片需要在前端進行圖片壓縮，將我的實現思路記錄一下。（我已經拿到上傳的file文件的前提下）

先創建一個公用的js，這裡我的是api.js，裡面封裝一些常用的方法

將圖片壓縮的方法寫到這個公用的js（api.js）中

  //base64轉碼（壓縮完成後的圖片為base64編碼，這個方法可以將base64編碼轉回file文件）  function dataURLtoFile(dataurl) {    var arr = dataurl.split(','),      mime = arr[0].match(/:(.*?);/)[1],      bstr = atob(arr[1]),      n = bstr.length,      u8arr = new Uint8Array(n);    while (n--) {      u8arr[n] = bstr.charCodeAt(n);    }    return new File([u8arr], { type: mime });    }  //壓縮圖片  function compressImg(file){    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(fileSize1&&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 = dataURLtoFile(base64); //如果後臺接收類型為base64的話這一步可以省略                  resolve(files)       };     };    })  };    //結尾處將該方法暴露出來供外部調用  export default {	   compressImg,  }

在main.js中引入公用js（api.js）

  import api from './http/api.js' //這裡注意自己的路徑  Vue.prototype.$api = api  //註冊為全局變量

接下來在需要的地方調用我們的公用方法

  this.$api.compressImg（）//調用

我的調用方法
 圖片壓縮的方法為異步執行 使用async await 解決異步問題（需要等壓縮完成後）

    //上傳前壓縮圖片     async beforeRead(file){//async await 解決異步問題，      var formData = new FormData();//創建新的form      if(file.length){   //file.length為真的時候說明是多圖上傳  要循環多圖將file對象放進form中       for(let i=0;i<file.length;i++){        var f = await this.$api.compressImg(file[i]) //await只能放在async函數裡 await會等待異步方法的返回值拿到以後在執行後面的方法       formData.set('file'+i,f)       }      }else{       let f = await this.$api.compressImg(file)       formData.set('file0',f)      }     }

然後將formData傳給後臺，生成圖片的線上地址就OK了！