微信小程序上传多张图片到服务器 怎么在微信小程序中同时上传多张图片

怎么在微信小程序中同时上传多张图片

发布时间：-04-16 18:05:52

来源：亿速云

阅读：99

作者：Leah

今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

1.图片选择后，路径已经存入list中：data:{

images:[],//选择的图片

},

2.调用递归上传的方法：wx.chooseImage({

varthat=this

count:9,

sizeType:['original','compressed'],

sourceType:['album','camera'],

success:function(res){

varsuccessUp=0;//成功，初始化为0

varfailUp=0;//失败，初始化为0

varlength=that.data.images.length;//总共上传的数量

varcount=0;//第几张，初始化为0

varurl=serverUrl+'/secondHand/uploadImg?id='+secondHandId;//上传的接口

//调用上传图片的公共函数

that.uploadOneByOne(url,that.data.images,successUp,failUp,count,length);

},

});

3.递归上传方法：/**

*上传图片：递归的方式上传

*url:上传地址

*imgPaths：上传的图片列表

*successUp：上传成功的个数，初始化为0

*failUp：上传失败的个数，初始化为0

*count：第几张

*length：图片列表的长度

*/

uploadOneByOne(url,imgPaths,successUp,failUp,count,length){

varthat=this;

wx.uploadFile({

url:url,//上传地址地址

filePath:imgPaths[count],

name:"file",//后台接收的文件名

success:function(e){

successUp++;//成功+1

},

fail:function(e){

failUp++;//失败+1

},

complete:function(e){

count++;//下一张

if(count==length){

TODO:上传完毕后跳转页面

wx.showToast({

title:'发布成功',

icon:'success',

duration:2000

})

}

else{

//递归调用，上传下一张

that.uploadOneByOne(url,imgPaths,successUp,failUp,count,length);

}

}

})

},

4.后台接口：@PostMapping("/uploadImg")

publicStringaddSecondHandImg(Stringid,@RequestParam("file")MultipartFile[]files){

//该接口被多次调用，这里写自己的业务，省略。。。

return"";

}

看完上述内容，你们对怎么在微信小程序中同时上传多张图片有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。