vue多图上传到阿里云

结合这两篇文章小程序选择图片、预览，上传到阿里云和阿里云上传图片

• 引入js

//引入阿里云sdk文件
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> 

• 做循环判断上传成功后再上传下一张图

//请求到阿里云相关的数据
let fileI = imgList[i],
    client =  new OSS.Wrapper({
       region: 'oss-cn-hangzhou',
       accessKeyId: accessKeyId,
       accessKeySecret: accessKeySecret,
       stsToken: stsToken,
       expiration:str.expiration,
       bucket: 'xxxxx' //文件名称
  });

• 循环上传 imgList 图片文件 imgArr上传完成的图片数组，代码核心

function uploadImg(i){        
        if (i >= imgList.length){
           //全部上传完成
        }else if (imgArr[i]&&imgArr[i].indexOf('oss-cn-xx.aliyuncs.com') > -1 ){
          i++;
          if (i >= imgList.length) {
            //全部上传完成
          } else {
            //上传下一张
            uploadImg(i)
          };
        }else{ //上传
          let fileI = imgList[i],
              type = fileI.type.indexOf('/') ? fileI.type.split('/')[1] : 'png';
          type = type=='jpg'?'png':type, 
          let storeAs = '', 
              time = new Date().getTime();
          storeAs = '文件目录' + "_" + time + '_' + i +'.' + type;
          client.multipartUpload(storeAs, fileI).then(function(result) {
            console.log(result);
            let src = 'http://xxx.oss-cn-hangzhou.aliyuncs.com/' + result.name;
            imgArr.push(src);
            i++;
            if (i >= imgList.length) {
               //全部上传完成
            } else {
             //上传下一张
             uploadImg(i)
            };
          }).catch(function(err) {
            console.log(err);           
            alert("第"+(i + 1)+"张上传失败," + err);
            return false;
          });
        }
      }