国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

entner / 3159人閱讀

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

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

該大神文章里有寫github地址,里面的2.0分支采用vue2.0實現(xiàn),只不過這個上傳圖片用的是分片上傳,即斷點續(xù)傳,分片上傳由于一片是以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的就可以成功上傳了,但是返回的數(shù)據(jù)和小于100k的不太一樣,

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

返回數(shù)據(jù)對應如下:

小于100k:

大于100k時:

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

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

我的最終代碼如下(這是vue中綁定在 input file上的一個函數(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("上傳圖片失敗,請重試!");
                    });
                  }else{
                    Toast("上傳圖片不能超過2M,請重試!");
                  }
                }
              }else{
                Toast("圖片最多上傳十張");
              }
            }
          }
        });

      },

添加照片

這個上傳圖片的方法實現(xiàn)阿里云多圖上傳,圖片大小限制,調用后臺返回的接口 /oss/get_token

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

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90656.html

相關文章

  • 騰訊阿里對比哪個好?計算優(yōu)勢測評

    摘要:騰訊云和阿里云針對按量計費的云服務器,均要求賬戶內有一定的余額騰訊云好像沒有最低充值要求,充值元即可阿里云要求賬戶內至少有元余額。基于上述原因,我們分別在騰訊云和阿里云創(chuàng)建最低配版的云數(shù)據(jù)庫和。 云計算市場爭奪阿里云作為名副其實的國內業(yè)界第一,名聲非常大,不過最近 IT 之家的事鬧出來之后,我有點慶幸最終沒有選擇它。騰訊云算是業(yè)界老二,而且有著騰訊這個強大的靠山,云服務產品的種類和質量...

    zengdongbao 評論0 收藏0
  • 國內公有大幅降價后,首份一手計算產品評測報告

    摘要:最近國內公有云服務商掀起了一輪降價浪潮,繼阿里云上月宣布降價之后,騰訊云也在本月初推出全線降價優(yōu)惠。上個月阿里云在云棲大會上宣布降價,昨天騰訊云方面也推出了全線降價活動,對包年包月產品均提供了大幅度的降價優(yōu)惠。 最近國內公有云服務商掀起了一輪降價浪潮,繼阿里云上月宣布降價之后,騰訊云也在本月初推出全線降價優(yōu)惠。本文希望從云計算用戶的角度,通過真實的產品使用、評測,對降價后各家的產品性價...

    3fuyu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<