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

首先，vue和阿里雲oss上傳圖片結合參考了 這位朋友的 https://www.jianshu.com/p/645... 文章，成功的解決了我用阿里雲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/docum...

exopose header 要設置爲 ETag

當成功設置以後，大於100k的就能夠成功上傳了，可是返回的數據和小於100k的不太同樣，

大於100k以後沒有直接返回url,只有在res.requestUrls 裏能夠看到對應的url ，可是後面還會有一個分片上傳的id。

返回數據對應以下：

小於100k:

大於100k時：

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

最終我用截取字符串截取到大於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/*" 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上傳組件