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

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

往期文章

个人主页