wx.uploadFile只能一次上传一张, 有什么办法可以实现批量上传吗?
目前官方尚未提供批量上传的api,所以只能自己想办法曲线救国
业务需求
日常我们经常会遇到这样的业务场景,提交表单时,将多张图片和文本数据一起上传到服务器。在web端我们可以利用FormData组装数据来实现。但小程序端是没有浏览器对象的。
曲线救国
开头我们提到了,小程序端没有批量上传的api,结合上面的业务场景,我们分两步走来实现这个需求。
- 循环上传图片
submitPic(){
/**
this.data.tempFilePaths 用户选择的图片
URL.uploadImg 服务器接口路径
docMainId 文件主表ID 首次上传文件时返回 后续其他文件上传时需携带此参数 提交表单时 业务主表通过此参数与多个文件建立关联
index 文件列表索引值
*/
if(!this.data.tempFilePaths || this.data.tempFilePaths.length == 0){
wx.showToast({
title: '请先上传图片',
icon:'none',
})
return
}
wx.showLoading({
title: '上传中',
mask: true
})
var docMainId = null
var index = 0;
//
(function uploadImage(self){
if(index < self.data.tempFilePaths.length){
var url = `${URL.uploadImg}`
if(docMainId){
url += `?docMainId=${docMainId}`
}
wx.uploadFile({
url: url,
filePath: self.data.tempFilePaths[index],
name: 'uploadImg',
success:res=> {
docMainId = res.mainId
index++
uploadImage(self)
}
})
}else{
self.setData({docMainId})
self.subHandler()
}
})(this);
},
- 提交表单数据
/**
URL.subHandler 服务器接口路径
*/
subHandler(){
wx.request({
url: URL.subHandler,
data:{
docMainId:this.data.docMainId,
...
},
success:res=>{
wx.hideLoading()
...
},
fail:res=>{
wx.hideLoading()
...
}
})
},