首先，vue和阿里云oss上传图片结合参考了 这位朋友的  文章，成功的解决了我用阿里云oss上传图片前的一头雾水。

该大神文章里有写github地址，里面的2.0分支采用vue2.0实现，只不过这个上传图片用的是分片上传，即断点续传，分片上传由于一片是以100kb为起始的，所以当图片大小小于100kb的时候不分片，可以正常上传，当大于100k的时候，会报错如下：

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

当报这个错误的时候，请看看阿里云自己的后台有没有按文档设置

exopose header 要设置为 ETag

当成功设置之后，大于100k的就可以成功上传了，但是返回的数据和小于100k的不太一样，

大于100k之后没有直接返回url,只有在res.requestUrls 里可以看到对应的url ，但是后面还会有一个分片上传的id。

返回数据对应如下：

小于100k:

 

大于100k时：

 

看了官方文档有关分片上传的方法，表示并没有看懂如何把分片集合上传，文档在此，  如有大神看懂，还请多多指教！！不胜感激！！

 

最终我用截取字符串截取到大于100k的图片的url，实现客户端预览。

我的最终代码如下（这是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('图片最多上传十张');              }            }          }        });      },

     
          
                
                
      
            
       
                    
                   
       
添加照片
          
      
     

 

这个上传图片的方法实现阿里云多图上传，图片大小限制，调用后台返回的接口  

/oss/get_token

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

我把一个upload上传组件放在了我的github: