怎么在微信小程序中同时上传多张图片
发布时间:-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"";
}
看完上述内容,你们对怎么在微信小程序中同时上传多张图片有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。