菜单

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

2018年9月26日 - betway官网手机版

率先,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上传组件

 

 

相关文章

发表评论

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

网站地图xml地图