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

該大神文章里有寫github地址，里面的2.0分支采用vue2.0實現，只不過這個上傳圖片用的是分片上傳，即斷點續傳，分片上傳由于一片是以100kb為起始的，所以當圖片大小小于100kb的時候不分片，可以正常上傳，當大于100k的時候，會報錯如下：

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

當報這個錯誤的時候，請看看阿里云自己的后臺有沒有按文檔設置

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

exopose header 要設置為 ETag

當成功設置之后，大于100k的就可以成功上傳了，但是返回的數據和小于100k的不太一樣，

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

返回數據對應如下：

小于100k:

?

大于100k時：

?

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

?

最終我用截取字符串截取到大于100k的圖片的url，實現客戶端預覽。

我的最終代碼如下（這是vue中綁定在 input file上的一個函數）：

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('圖片最多上傳十張');}}}});}, <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>

?

這個上傳圖片的方法實現阿里云多圖上傳，圖片大小限制，調用后臺返回的接口??

/oss/get_token

獲得相應的secret。運用了mint-ui組件。

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

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。