摘要：首先，和阿里云上傳圖片結(jié)合參考了這位朋友的文章，成功的解決了我用阿里云上傳圖片前的一頭霧水。我把一個(gè)上傳組件放在了我的打開阿里云上傳組件

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

該大神文章里有寫github地址，里面的2.0分支采用vue2.0實(shí)現(xiàn)，只不過這個(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/docum...

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/docum... 如有大神看懂，還請(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("上傳圖片不能超過2M，請(qǐng)重試!");
                  }
                }
              }else{
                Toast("圖片最多上傳十張");
              }
            }
          }
        });

      },
       
  
  

    
    
添加照片
  

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

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

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