在实际开发中，很多时候都需要要上传图片，而正常需要上传一张完成之后，才能继续上传，这样就显得非常麻烦，同时给用户的体验很不好，那么对于微信小程序，怎么上传多张图片呢，今天厦门在乎科技为大家带来微信小程序批量上传图片功能，一起来了解一下吧。
微信小程序批量上传图片：
1.首先，我们来看一看 wx.chooseImage(object) 和 wx.uploadFile(OBJECT) 这两个 api
wx.chooseImage(object) api 组件
wx.uploadFile(OBJECT) api 组件
示例代码：
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData:{
'user': 'test'
},
success: function(res){
var data = res.data
//do something
}
})
}
})
这里的示例代码，是选择图片，然后上传选中的图片中的第一个图片
2.现在开始写多张图片上传的例子，首先，我们还是要选择图片
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址，是一个数组
}
})
3.然后在app.js中写一个多张图片上传的方法,后面引入，你也可以写在一个JS文件中，后面引入：
//多张图片上传
function 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: 'fileData',
formData:null,
success: (resp) => {
success++;
console.log(resp)
console.log(i);
//这里可能有BUG，失败也会执行这里
},
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);
}
}
});
}
以上就是今天为大家带来的关于“小程序上传多张图片 微信小程序批量上传图片”全部内容，通过对上传图片的API进行进一步的处理，同时为了方便以后使用，可以封装成一个特定的组件分享出来，想要了解更多关于小程序开发内容，欢迎关注厦门在乎科技-专注小程序、app、网站开发
