微信小程序实现同时上传多张图片
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现同时上传多张图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码，供大家参考，具体内容如下
1.图片选择后，路径已经存入list中：
data: {
images: [], //选择的图片
},
2.调用递归上传的方法：
wx.chooseImage({
var that = this
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res){
var successUp = 0; //成功，初始化为0
var failUp = 0; //失败，初始化为0
var length = that.data.images.length; //总共上传的数量
var count = 0; //第几张，初始化为0
var url = 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) {
var that = 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")
public String addSecondHandImg(String id, @RequestParam("file") MultipartFile[] files) {
//该接口被多次调用，这里写自己的业务，省略。。。
return "";
}
文章参考：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。