微信小程序实现上传多张本地图片到服务器和图片预览微信小程序实现上传多张本地

1，前言最近在写小程序，用到了wx.uploadFile方法，发现这方法居然不支持同时上传多个文件，于是自己写了一个上传多个的方法。
[图片上传失败...(image-c4d973-1610865751169)]
2，需求博主做的是用户投诉页面；需求是用户上传最多三张图片，最后把图片和文字和用户信息等一起提交给服务器；
[图片上传失败...(image-8e50b6-1610865751169)]
3，解决思路博主的解决思路是定义一个递归函数，递归调用wx.uploadFile上传，全部完成后结束递归。
4，代码展示 this.data里的数据

/** * 页面的初始数据 */ data: { imgs:[],//上传图片列表 imgPath:[],//已上传成功的图片路径 },

上传图片代码

// 上传照片 chooseImg (e) { const _this = this; let imgs = this.data.imgs; let imgNumber = this.data.imgs.length; //当前已上传的图片张数 if(imgNumber >= 3){ FN.Toast("超出上传个数"); return false; }else{ imgNumber = 3 - imgNumber; }; wx.chooseImage({//打开本地相册选择图片 count: imgNumber, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success (res) { const tempFilePaths = res.tempFilePaths; for(let i = 0; i < tempFilePaths.length; i++){ imgs.push(tempFilePaths[i]); } _this.setData({//赋值，回显照片 imgs: imgs }); let successUp = 0; //成功 let failUp = 0; //失败 let count = 0; //第几张 let length = tempFilePaths.length; //总数 _this.recursionUploading(tempFilePaths, successUp, failUp, count, length); //调用上传方法 } }) },

递归上传方法

//采用递归的方式上传图片 recursionUploading(imgPaths, successUp, failUp, count, length){ var _this = this; wx.showLoading({ title: '正在上传第' + count + '张', }); wx.uploadFile({ url: `${app.globalData.baseURL}/api接口地址`, filePath: imgPaths[count], formData:{ userId:app.globalData.userMsg.userId }, name: "uploadImage", header: { 'content-type': 'multipart/form-data' }, success (e) { console.log(e) let path = _this.data.imgPath; let obj = e.data; if(obj.status === "y"){ path.push(obj.infoObject); _this.setData({ imgPath:path }); } successUp++; //成功+1 }, fail (e) { failUp++; //失败+1 }, complete (e) { count++; //下一张 if(count == length){ FN.Toast(`上传成功${successUp}`) }else{ //递归调用，上传下一张 _this.recursionUploading(imgPaths, successUp, failUp, count, length); } } }) },

预览大图

// 预览大图 lookBigImg (e) { let index = e.currentTarget.dataset.index; //索引 let big = this.data.imgs[index]; wx.previewImage({ current: big, // 当前显示图片的http链接 urls: this.data.imgs // 需要预览的图片http链接列表 }) },

如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎点赞关注评论；
END
【微信小程序实现上传多张本地图片到服务器和图片预览】往期文章