首先，vue和阿里云oss上傳圖片結(jié)合參考了 這位朋友的 https://www.jianshu.com/p/645f63745abd?文章，成功的解決了我用阿里云oss上傳圖片前的一頭霧水。

該大神文章里有寫github地址，里面的2.0分支采用vue2.0實(shí)現(xiàn)，只不過(guò)這個(gè)上傳圖片用的是分片上傳，即斷點(diǎn)續(xù)傳，分片上傳由于一片是以100kb為起始的，所以當(dāng)圖片大小小于100kb的時(shí)候不分片，可以正常上傳，當(dāng)大于100k的時(shí)候，會(huì)報(bào)錯(cuò)如下：

One or more of the specified parts could not be found or the specified entit

當(dāng)報(bào)這個(gè)錯(cuò)誤的時(shí)候，請(qǐng)看看阿里云自己的后臺(tái)有沒有按文檔設(shè)置

文檔地址：https://help.aliyun.com/document_detail/32069.htm

exopose header 要設(shè)置為 ETag

當(dāng)成功設(shè)置之后，大于100k的就可以成功上傳了，但是返回的數(shù)據(jù)和小于100k的不太一樣，

大于100k之后沒有直接返回url,只有在res.requestUrls 里可以看到對(duì)應(yīng)的url ，但是后面還會(huì)有一個(gè)分片上傳的id。

返回?cái)?shù)據(jù)對(duì)應(yīng)如下：

小于100k:

?

大于100k時(shí)：

?

看了官方文檔有關(guān)分片上傳的方法，表示并沒有看懂如何把分片集合上傳，文檔在此，https://help.aliyun.com/document_detail/31850.html??如有大神看懂，還請(qǐng)多多指教！！不勝感激！！

?

最終我用截取字符串截取到大于100k的圖片的url，實(shí)現(xiàn)客戶端預(yù)覽。

我的最終代碼如下（這是vue中綁定在 input file上的一個(gè)函數(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('上傳圖片失敗，請(qǐng)重試!');});}else{Toast('上傳圖片不能超過(guò)2M，請(qǐng)重試!');}}}else{Toast('圖片最多上傳十張');}}}});}, <div class="uploadBox"><!--<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple @change="onFileChange">--><input type="file" accept="image/*" multiple @change="onFileChange"><div><svg class="icon-jia icon" aria-hidden="true"><use xlink:href="#icon-jia"></use></svg><p>添加照片</p></div> </div>

?

這個(gè)上傳圖片的方法實(shí)現(xiàn)阿里云多圖上傳，圖片大小限制，調(diào)用后臺(tái)返回的接口??

/oss/get_token

獲得相應(yīng)的secret。運(yùn)用了mint-ui組件。

我把一個(gè)upload上傳組件放在了我的github:打開vue+阿里云oss上傳組件

?

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。