vue用阿里云oss上污染图片采取分片上传只能上传100kb以内的解决办法。vue用阿里云oss上污染图片采取分片上传只能上传100kb以内的解决办法。

第一,vue和阿里云oss上污染图片做参考了 这员朋友之
https://www.jianshu.com/p/645f63745abd 文章,成功的解决了本人于是阿里云oss上传图片前之一头雾水。

第一,vue和阿里云oss上污染图片做参考了 这员情人之
https://www.jianshu.com/p/645f63745abd 文章,成功的化解了我为此阿里云oss上传图片前之一头雾水。

该大神文章里来描绘github地址,里面的2.0子使vue2.0贯彻,只不过是上污染图片用底凡分片上传,即断点续传,分片上传由于同一片是坐100kb为起始之,所以当图片大小小于100kb的时节不分片,可以正常上传,当过100k的早晚,会报错如下:

该大神文章里有描绘github地址,里面的2.0分层使vue2.0贯彻,只不过这个上污染图片用的凡分片上传,即断点续传,分片上传由于同一切开是盖100kb为开端之,所以当图片大小小于100kb的时不分片,可以健康上传,当不止100k的时段,会报错如下:

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

当报这个错误的时刻,请看阿里云自己之后台有无发照文档设置

当报这个荒唐的时,请看阿里云自己之后台有没有来论文档设置

文档地址:https://help.aliyun.com/document\_detail/32069.htm

文档地址:https://help.aliyun.com/document\_detail/32069.htm

exopose header 要安装也 ETag

exopose header 要设置为 ETag

当成功安装后,大于100k的饶可以成功达成传了,但是返的数及小于100k的非极端一致,

当成功安装后,大于100k的就是好成功上污染了,但是回到的数与小于100k的非太一样,

超过100k从此没一直归url,只有当res.requestUrls 里可看相应之url
,但是后面还会见发一个分片上传的id。

过100k后头没有一直回到url,只有以res.requestUrls 里可看来相应之url
,但是后面还会见生一个分片上传的id。

归来数据对应如下:

回来数据对应如下:

小于100k:

小于100k:

365betway.com 1

365betway.com 2

 

 

大于100k时:

大于100k时:

365betway.com 3

365betway.com 4

 

 

看了合法文档有关分片上传的法门,表示并没有扣留明白什么管分片集合上传,文档在斯,https://help.aliyun.com/document_detail/31850.html  如产生大神看明白,还求多多指教!!不胜感激!!

在押了合法文档有关分片上传的不二法门,表示并从未看明白什么拿分片集合上传,文档在这,https://help.aliyun.com/document_detail/31850.html  如产生大神看明白,还请求多多指教!!不胜感激!!

 

 

最终自于是截取字符串截取到过100k的图样的url,实现客户端预览。

末了我因此截取字符串截取到过100k的图样的url,实现客户端预览。

本人之终极代码如下(这是vue中绑定以 input file上之一个函数):

自家之末梢代码如下(这是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>
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 
/oss/get_token 

落相应的secret。运用了mint-ui组件。

得到相应的secret。运用了mint-ui组件。

自我把一个upload上污染组件放在了自的github:开拓vue+阿里云oss上污染组件

自己把一个upload上污染组件放在了自我的github:打开vue+阿里云oss上污染组件

 

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website