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:

图片 1

图片 2

 

 

大于100k时:

大于100k时:

图片 3

图片 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上传组件