實現圖片上傳使用了WeUI uploader插件
WeUI：是一套同微信原生視覺體驗一致的基礎樣式庫，為微信Web開發量身設計
流程：圖片上傳用到了FileReader，FormData，用這兩個基本能實現圖片的預覽和上傳，實現圖片壓縮需要借助canvas。
（1）使用input file上傳圖片，用filereader讀取用戶上傳的圖片數據
（2）把圖片數據傳入img對象，然后將img繪制到canvas上，再調用canvas.toDataURL對圖片進行壓縮
（3）獲取到壓縮后的base64格式圖片數據，轉成blob（blob，二進制大對象，是一個可以存儲二進制文件的容器）塞入formdata，再通過ajax提交formdata。
大致思路是（代碼實現）：
第一步：添加uploader.vue組件
uploader.vue示例代碼
multiple：上傳圖片可多選
依據接口，需要添加請求頭：enctype ="multipart/form-data"
第二步：上傳圖片前要先在前端做下限制，如果不合規則，提示相關信息
定義圖片的類型、大小及上傳數量，picsUrl存放圖片數組，不符合規則的圖片提示相關信息
第三步：將input中選擇的圖片地址通過FileReader獲取后賦給新建的圖片對象，然后將圖片對象放到canvas畫布上
先獲取圖片數據，也就是監聽input file的change事件，然后獲取到上傳的文件對象files，將類數組的files轉成數組，然后進行for循環遍歷
通過FileReader獲取后賦給新建的圖片對象，然后將圖片對象放到canvas畫布上
var fd = new FormData(); //用來存放上傳數據
var img = new Image(); //創建圖像對象
var reader = new FileReader();//讀取用戶上傳的圖片數據
fd.append('files',blob); //追加上傳數據
根據image對象獲取圖片的width、height，創建畫布將圖片的寬高對應的賦值給畫布
注：canvas將圖片畫到畫布上的時候需要確定canvas的尺寸，同時設定好drawImage的參數
依次對應：ctx.drawImage(img,dx,dy,w,h)
dx：原圖像的左上角在目標canvas上x軸的位置
dy：原圖像的左上角在目標canvas上y軸的位置
w：在目標canvas上繪制圖像的寬度。允許對繪制的圖像進行縮放（如不處理，繪制圖片時寬度不會縮放）
h：在目標canvas上繪制圖像的高度。允許對繪制的圖像進行縮放（如不處理，繪制圖片時高度不會縮放）
注：為了上傳完整的圖片，dx,dy需要設置為0，w和h需要設置為原始圖片的寬度和高度。我們要等image對象下載完畢后獲取其原始尺寸
var base64 = canvas.toDataURL('image/png'); //進行圖片壓縮
壓縮圖片並不是直接把圖片繪制到canvas再調用一下toDataURL就可以
在IOS中，canvas繪制圖片有兩個限制：
(1) 圖片的大小，圖片超過200w像素，圖片無法繪制到canvas上，調用drawImage的時候不會報錯，用toDataURL獲取圖片數據的時候獲取到的是空數據
(2) canvas的大小有限制，canvas的大小大於約500w像素（寬高乘積）時，圖片畫不出來，其他東西也畫不出來
處理方法：
針對問題一：可以采取瓦片繪制。將圖片分割成多塊繪到canvas上；
針對問題二：可以對圖片寬高進行壓縮
第四步：圖片上傳
使用ajax，提交方式使用post
crossDomain:true //使用post提交時會連帶提交cookie
var blob = base64ToBlob(base64); //將base64轉為blob，使用base64提交時數據較大
數據上傳進度使用的模擬進度，間隔0.03s執行一次。這樣就實現了圖片的壓縮和上傳。
圖片上傳效果見示例可掃描二維碼：
