摘要:首先,和阿里云上傳圖片結合參考了這位朋友的文章,成功的解決了我用阿里云上傳圖片前的一頭霧水。我把一個上傳組件放在了我的打開阿里云上傳組件
首先,vue和阿里云oss上傳圖片結合參考了 這位朋友的 https://www.jianshu.com/p/645... 文章,成功的解決了我用阿里云oss上傳圖片前的一頭霧水。
該大神文章里有寫github地址,里面的2.0分支采用vue2.0實現(xiàn),只不過這個上傳圖片用的是分片上傳,即斷點續(xù)傳,分片上傳由于一片是以100kb為起始的,所以當圖片大小小于100kb的時候不分片,可以正常上傳,當大于100k的時候,會報錯如下:
One or more of the specified parts could not be found or the specified entit
當報這個錯誤的時候,請看看阿里云自己的后臺有沒有按文檔設置
文檔地址:https://help.aliyun.com/docum...
exopose header 要設置為 ETag
當成功設置之后,大于100k的就可以成功上傳了,但是返回的數(shù)據(jù)和小于100k的不太一樣,
大于100k之后沒有直接返回url,只有在res.requestUrls 里可以看到對應的url ,但是后面還會有一個分片上傳的id。
返回數(shù)據(jù)對應如下:
小于100k:
大于100k時:
看了官方文檔有關分片上傳的方法,表示并沒有看懂如何把分片集合上傳,文檔在此,https://help.aliyun.com/docum... 如有大神看懂,還請多多指教!!不勝感激!!
最終我用截取字符串截取到大于100k的圖片的url,實現(xiàn)客戶端預覽。
我的最終代碼如下(這是vue中綁定在 input file上的一個函數(shù)):
onFileChange(e) { const _this = this; axios({ url: "/oss/get_token", method: "GET", headers: {"w-auth-token": this.token} }).then((res) => { var client = new OSS.Wrapper({ accessKeyId: res.data.accessKeyId, accessKeySecret: res.data.accessKeySecret, stsToken: res.data.securityToken, region: _this.region, bucket: _this.bucket }); let files = e.target.files || e.dataTransfer.files; if (!files.length)return; if (files.length) { const fileLen = files.length; const currentImgLength=_this.imgList.length; const restLength=10-currentImgLength; if(currentImgLength>10){ Toast("圖片最多上傳十張"); }else{ if(fileLen<=restLength){ for (let i = 0; i < fileLen; i++) { const file = files[i]; let date = new Date(); let path="wap/life/release/"+this.id+"/"+date.getFullYear()+(date.getMonth()+1)+date.getDate()+date.getHours()+date.getMinutes()+date.getSeconds()+date.getMilliseconds()+ "." + file.name.split(".").pop(); let size=file.size; if(Math.round(size/(1024*1024)*100)/100<=2){ client.multipartUpload(path, file).then((results) => { if(size>=100*1024){ _this.imgList.push(results.res.requestUrls[0].split("?")[0]); }else{ _this.imgList.push(results.url); } console.log(results); }).catch((err) => { Toast("上傳圖片失敗,請重試!"); }); }else{ Toast("上傳圖片不能超過2M,請重試!"); } } }else{ Toast("圖片最多上傳十張"); } } } }); },添加照片
這個上傳圖片的方法實現(xiàn)阿里云多圖上傳,圖片大小限制,調用后臺返回的接口 /oss/get_token
獲得相應的secret。運用了mint-ui組件。
我把一個upload上傳組件放在了我的github:打開vue+阿里云oss上傳組件
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90656.html
摘要:騰訊云和阿里云針對按量計費的云服務器,均要求賬戶內有一定的余額騰訊云好像沒有最低充值要求,充值元即可阿里云要求賬戶內至少有元余額。基于上述原因,我們分別在騰訊云和阿里云創(chuàng)建最低配版的云數(shù)據(jù)庫和。 云計算市場爭奪阿里云作為名副其實的國內業(yè)界第一,名聲非常大,不過最近 IT 之家的事鬧出來之后,我有點慶幸最終沒有選擇它。騰訊云算是業(yè)界老二,而且有著騰訊這個強大的靠山,云服務產品的種類和質量...
摘要:最近國內公有云服務商掀起了一輪降價浪潮,繼阿里云上月宣布降價之后,騰訊云也在本月初推出全線降價優(yōu)惠。上個月阿里云在云棲大會上宣布降價,昨天騰訊云方面也推出了全線降價活動,對包年包月產品均提供了大幅度的降價優(yōu)惠。 最近國內公有云服務商掀起了一輪降價浪潮,繼阿里云上月宣布降價之后,騰訊云也在本月初推出全線降價優(yōu)惠。本文希望從云計算用戶的角度,通過真實的產品使用、評測,對降價后各家的產品性價...
閱讀 3296·2021-11-24 09:39
閱讀 2805·2021-10-12 10:20
閱讀 1907·2019-08-30 15:53
閱讀 3076·2019-08-30 14:14
閱讀 2600·2019-08-29 15:36
閱讀 1121·2019-08-29 14:11
閱讀 1956·2019-08-26 13:51
閱讀 3408·2019-08-26 13:23