微信小程序实现多图片上传

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_41041379/article/details/82185998

官方文档中的示例是单文件上传的，而且因为path值是string类型，所以不能整个数组上传，因此我把我个人的实现方法分享一下

首先在app.js文件中写入多图片上传的方法

[code]  uploadimg(data) {
var that = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'files',
formData: null,
success: (resp) => {
success++;
console.log(resp)
console.log(i);
},
fail: (res) => {
fail++;
console.log('fail' + i + "fail:" + fail);
},
complete: () => {
console.log(i);
i++;
if (i == data.path.length) { //图片上传完，停止调用
console.log('执行完毕');
console.log('成功：' + success + "失败：" + fail);
} else { //图片还没上传完，继续调用
console.log(i);
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);
}
}
})
}

其中需要注意的是name字段的名字要和后台一样，否则上传会丢失，就是即使前端返回上传成功，但是后台也收不到图片，比如这里是files，后台也要写files，如果这里写filedata，后台也要写filedata

在index.js文件中引用这个方法，代码如下

[code]Page({
data: {
countIndex: 8,
imageList:[],
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
src: ''
}
})

[code]chooseImage: function() {
var that = this
wx.chooseImage({
count: this.data.count[this.data.countIndex],
success: function(res) {
var imgsrc = res.tempFilePaths;
console.log(res)
that.setData({
imageList: imgsrc
})
}
})
},
//上传图片
uploadimg: function() {
var imageList = this.data.imageList;
app.uploadimg({
url: 'http://172.16.97.62:8080/upanddown/upload2',//这里是你要上传的服务器接口
path: imageList//这里是你最开始定义的图片数组
})
}

然后在表单提交按钮里调用的话代码如下

[code]  formSubmit: function(e) {
console.log('form发生了submit事件，携带的数据为：', e.detail.value)
const params = e.detail.value
//校验表单
if (!this.WxValidate.checkForm(params)) {
const error = this.WxValidate.errorList[0]
this.showModal(error)
return false
}
this.uploadimg()//这里一定要用this
this.showModal({
msg: '提交成功'
})
}

这样在提交表单的同时就能上传图片了，但是我这里表单的提交没有写接口，因为比较简单，自行实现吧

最后在真机上测试时，远程调试里的结果

阅读更多