vue多图上传到阿里云

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

• 引入js

//引入阿里云sdk文件



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

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


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

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