介紹
vue-core-image-upload 是一款輕量級的 Vue.js 上傳插件，它可以支持的圖片的上傳，裁剪，壓縮。它同樣也支持在移動端的圖片處理，它定義了諸多上傳周期，你可以自由的進行流程控制。
Github
https://github.com/Vanthink-UED/vue-core-image-upload
安裝
npm install vue-core-image-upload --save
安裝完成后，編輯源碼
基本屬性
Vue-core-image-upload 提供了很多可配置的選項，從而希望盡可能的滿足開發者的需求。
響應事件
我們在上傳的不同階段指定了不同的派發事件，你可以綁定每個事件的響應方法，實現對于流程的控制。
- imageuploaded
當圖片上傳完，會調用該事件綁定的函數，并且用戶可以獲取到服務端返回的數據。
- imagechanged
當input框改變選擇圖片時候觸發，會返回input的獲取的圖片數據
- imageuploading
當圖片上傳過程中觸發，你可以自定義你需要處理的內容比如顯示加載動畫等。
- errorhandle
當圖片上傳發生錯誤的時候觸發，會返回錯誤狀態信息
methods: { imagechanged() { this.step += 1; }, imageuploading() { this.step += 1; }, imageuploaded(res) { this.step += 1; this.src = res.data.src; } }自定義組件樣式
你可以設置組件的class 以及自己編寫子組件的形式來控制組件的顯示的樣子。
裁剪圖片
你可以通過設置 crop，來實現圖片的裁剪。你可以指定圖片裁剪的寬高，以及它的最大寬度和高度這些參數。
設置 cropRatio來限制裁剪圖片的形狀，需要字符串的格式(1:1 或者2:3這種比例形式)，當然你可以設置為 auto 則不限制裁剪框的形狀。
設置圖片裁剪后，批量上傳將不再生效。
圖片裁剪完有兩種選擇，選擇本地裁剪local或者服務端裁剪 server。
- 本地裁剪
你可以將 crop 設置為 local 來實現本地裁剪。本地裁剪完成后發送給服務端接口的圖片便是已經裁剪好的圖片。
- 服務端裁剪
服務端裁剪是指將原圖片和裁剪的參數一起發給后端，方便服務端保存原圖，以及對原圖的其他操作，而服務端能夠接收到post的參數如下:
調整圖片
你可以設置 resize 來進行圖片的縮放。
設置resize="local" 意味著圖片的縮放將在本地進行。發給服務端的將會是大小調整完畢的后的圖片。
上傳多個文件
- multiple
你可以使用 multiple 屬性設置為true來實現多文件的上傳。需要注意的是，你設置了該屬性后,服務端收到文件上傳的字段數據會是一個數組。
- multiple-size
你可以使用multiple-size來限制圖片的數量，你可以限制上傳文件的數量。
壓縮圖片
設置compress的數值，你可以在上傳之前進行圖片的本地壓縮。其中 compress 為 0 表示不壓縮，數據越大，圖片的質量越差，且最大值不能大于100。
向服務端發送數據
你可以設置data 來將一些附帶的數據發送給服務端。 當然你也可以將一些數據包含在 header 中傳遞過去，你只需要綁定到 header即可。
