1.做這個確實有必要的，有的手機拍出來的照片很大，然後加上網速一般，上傳很慢，一直等待，好不容易等到資源上傳時間結束了，但是後端介面又超時了。太久了，使用者體驗肯定不好。簡直可以說是沒辦法繼續使用了。

2.已經可以查到好多人寫好的。但是直接拿來複用，總有這樣那樣的問題。

3.我用的是vue框架，本來打算用原生的方式。就是網上很多大神寫好的，貼一張別人寫的程式碼圖

這樣就拿到了圖片的base64地址。

然後再把img畫到canvas上，然後再轉成blob形式上傳。可是也許是上傳格式的問題。我這邊總是上傳失敗。so放棄了這種寫法。

4.還是決定用外掛，比較簡單些。localResizeIMG；裝個依賴cnpm i lrz --save;頁面中引入 import lrz from 'lrz';然後可以在監聽事件中使用了。

        lrz(file)          .then((res)=>{            let data = new FormData();            data.append('file', convertBase64UrlToBlob(res.base64))            axios.post('xxxxxx', data)            .then((res) => {//處理上傳成功之後            }).catch(() => {                //處理失敗            })            }).catch(() => {})           //lrz可以設定引數，也可以不設定，預設質量是0.7,寬度是原來的寬度。這樣壓縮下來之後圖片大概是原圖十分之一的大小。//引數文件可訪問這裡 http://www.bcty365.com/content-69-5392-1.htmlfunction

convertBase64UrlToBlob(urlData){ var bytes=window.atob(urlData.split(',')[1]); //去掉url的頭，並轉換為byte //處理異常,將ascii碼小於0的轉換為大於0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : 'image/png'}); }

這個是把base64格式轉化成blob形式，可以讓後端接收的二進位制形式。

這樣就ok啦。