vue用阿里雲oss上傳圖片使用分片上傳只能上傳100kb以內的解決辦法

首先，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上傳組件