『壹』 Vue 上傳圖片到七牛雲實用攻略
vue 一般採用element 的upload 上傳圖片/文件。
首先，設定參數
參考Element upload 文檔
其次，如圖所示，重點在於domain和qiniuaddr兩個參數！ 參考 七牛雲存儲圖片域名文檔
然後 上傳一定要先獲取到七牛雲token！我是採用axios post獲取。
接著，把返回的 file.name賦值給 key
this.QiNiuYun.key = `name_${file.name}`;
如圖 上傳成功/錯誤處理 函數
大功告成！
補充：
1. this.uploadImageUrl 這個變數實際上是 圖片真正的URL-----https地址！！！
2. 該方法是針對單圖上傳，如果想多圖 將data 內的參數 limit：1 修改為需要的圖片數量 ！！！
3. 注意！當後台需要你傳遞多張圖片的url時，可採用 此方法！！！
//拼接 url
if(this.uploadImageList===''){
this.uploadImageList= this.uploadImageUrl;
}else{
this.uploadImageList=this.uploadImageList+';'+ this.uploadImageUrl;
}
『貳』 vue頁面傳值能傳圖片嗎
可以
1.雲儲存
常見的 七牛雲，OSS（阿里雲）等，這些雲平台提供API介面，調用相應的介面，文件上傳後會返回圖片存儲在伺服器上的路徑，前端獲得這個路徑保存下來提交給後端即可。此流程處理相對簡單。
主要步驟
向後端發送請求，獲取OSS配置數據
文件上傳，調用OSS提供介面
文件上傳完成，後的文件存儲在伺服器上的路徑
將返回的路徑存值到表單對象中
代碼範例
我們以阿里的 OSS 服務來實現，們試著來封裝一個OSS的圖片上傳組件。
通過element-ui的upLoad組件的 http-request 參數來自定義我們的文件上傳，僅僅使用他組件的樣式，和其他上傳前的相關鉤子（控制圖片大小，上傳數量限制等）。
『叄』 vue點擊上傳圖片，vue上傳oss，vue-cropper圖片裁剪功能
很多剛入門的小夥伴上傳圖片都會使用現成的框架，然後根據框架提供的api進行上傳，感覺這樣是最簡單的，其實上傳圖片是一個很簡單的功能，
1.將input的設為透明然後定位到按鈕上面，通過點擊實現上傳
2.點擊按鈕，通過處發input的點擊事件後處發change，達到喚起上傳圖片的效果
先通過npm安裝oss依賴
oss官方文檔
1.前端拿到 accessKeyId，accessKeySecret直接上傳oss
這種用法會直接暴露id及secret，相當於把自己家門的鑰匙告訴別人，不推薦使用
2.通過後台轉換，拿到對應的參數，進行上傳
圖片裁剪的插件，先通過npm安裝依賴
vue-cropper 高版本解決在ios上圖片拍照旋轉問題
父組件
子組件，在項目components文件中新建一個cropper文件，在父組件中引入