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

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

来源：亿速云

阅读：99

作者：Leah

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

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 "";

}

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