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:

2019亚洲杯 1

2019亚洲杯 2

 

 

大于100k时:

大于100k时:

2019亚洲杯 3

2019亚洲杯 4

 

 

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

扣押了官文档有关分片上传的章程,表示并无扣明白什么把分片集合上传,文档在斯,https://help.aliyun.com/document_detail/31850.html  如有大神看明白,还恳请多多指教!!不胜感激!!

 

 

末了自己于是截取字符串2019亚洲杯截取到过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上污染组件

 

 

相关文章