Vue 上傳圖片到七牛云實(shí)用攻略

vue 一般采用element? 的upload 上傳圖片/文件。

創(chuàng)新互聯(lián)建站主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)蕭縣,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

首先，設(shè)定參數(shù)

參考Element? upload? 文檔

其次，如圖所示，重點(diǎn)在于domain和qiniuaddr兩個參數(shù)！? ? ?參考 七牛云存儲圖片域名文檔

然后? 上傳一定要先獲取到七牛云token！我是采用axios? post獲取。

接著，把返回的 file.name賦值給 key

this.QiNiuYun.key = `name_${file.name}`;

如圖 上傳成功/錯誤處理 函數(shù)

大功告成！

補(bǔ)充：

1.? ? this.uploadImageUrl? 這個變量實(shí)際上是? 圖片真正的URL-----https地址?。?！

2.? ? 該方法是針對單圖上傳，如果想多圖? ? 將data 內(nèi)的參數(shù)? ?limit：1? ?修改為需要的圖片數(shù)量? ? ！??！

3.? ? ?注意！當(dāng)后臺需要你傳遞多張圖片的url時，可采用 此方法！??！

//拼接 url

if(this.uploadImageList===''){

this.uploadImageList=?this.uploadImageUrl;

}else{

this.uploadImageList=this.uploadImageList+';'+?this.uploadImageUrl;

}

如何將圖片上傳到七牛云平臺？

上一篇文章介紹了“如何將圖片上傳到Cloudinary云平臺？”

但是由于Cloudinary的服務(wù)器在國外，所以上傳和讀取圖片的速度會很慢，不適合用作生產(chǎn)，因此有必要再介紹一下國內(nèi)廣受歡迎的“七牛”云平臺。以及分步驟給大家介紹如何使用七牛。

各位可以使用我的邀請鏈接注冊：

拜托?。?！

我們這里添加的對象存儲空間叫做“gougouavatar”

其中的ACCESS_KEY和SECRET_KEY兩個參數(shù)來自于“個人中心”的“秘鑰管理”模塊：

_getQiniuToken()返回一個封裝promise函數(shù)，這個函數(shù)調(diào)用了后臺生成簽名算法的接口；

這個函數(shù)的回調(diào)里拿到了后臺生成的key和其他參數(shù)；

最后調(diào)用_upload方法向七牛的上傳圖片的接口地址： ，發(fā)送請求，上傳圖片；

最后的響應(yīng)參數(shù)response.key即為圖片上傳成功之后的地址。

如：deae507d-73fd-4489-9d7f-d5fa275bcbe5.jpeg

想要訪問該圖片，還需拼接上七牛提供的測試域名：

經(jīng)過測試，使用七牛進(jìn)行上傳的速度確實(shí)很快，比國外的cloudinary要快上好幾倍，使用體驗(yàn)還是很不錯的，大家可以放心使用。

圖片上傳七牛token失效

由于公司后臺web需要兼容到 IE8 ，對上傳圖片的模塊進(jìn)行了修改，本來是運(yùn)用 h5自帶的 上傳文件方法，但是在 IE8,9 中原生js不支持 input=file ，所以參照了七牛提供的上傳方法。

圖片上傳到七牛需要先獲取 token ，開始時沒有想到token會失效的問題，通過QA測試發(fā)現(xiàn)偶爾會報 七牛Post 401的錯誤。 今在七牛上傳提供方法err的時候在調(diào)用一次獲取token的方法。

安卓批量上傳圖片到七牛的兩種方法

安裝七牛SDK，因?yàn)槲覀冺?xiàng)目需要每個文件必須要一個token，也可以獲取一個token然后客戶端自己用拼接key

注：如果自己拼接key最后是時間戳加上圖片的下標(biāo)，不然容易因?yàn)樯蟼鲿r間過快導(dǎo)致時間戳一樣，造成上傳失敗。當(dāng)初寫iOS上傳自己拼接key的時候遇到過這個問題。

創(chuàng)建一個工具類QiNiuUploadUtil，

初始化七牛的上傳工具類UploadManager

然后創(chuàng)建回調(diào)接口QiNiuUploadCompletionHandler

因?yàn)楸卷?xiàng)目圖片多選都用PictureSelector選擇器所提上傳圖片數(shù)組 類型為LocalMedia，這個根據(jù)自己項(xiàng)目來改