小程序和uniapp实现多图上传功能
小程序和uniapp实现多图上传功能,减少代码冗余量
·
一、官方实现图片上传示例:
wx.chooseImage({
success (res) {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = res.data
//do something
}
})
}
})
二、这里对功能进行拆分,具体如下:
1.定义上传功能函数
/**
* 对小程序图片上传功能进行封装(需更灵活操作,可对代码进行优化)
*/
const uploadFile = (_data, _path) => {
return new Promise((resolve, reject) => {
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
filePath: _path,
name: 'file',
formData: _data,
success (res){
resolve(res.data);
},
fail (msg){
reject();
}
})
});
}
2.选择图片并上传所有图片,通过Promise.all实现多图同步上传功能
wx.chooseImage({
success (res) {
//此处可添加wx.showLoading提示上传信息
//实现多图上传
Promise.all(
/*
通过map、Promise功能实现同时上传多张图片功能
此处map返回结果为 [uploadFile({}, '图片路径'), uploadFile({}, '图片路径'), ...]
*/
res.tempFilePaths.map( item => uploadFile({}, item) )
).then(res => {
/*
如Promise执行前添加wx.showLoading函数
执行完毕后此处必须执行wx.hideLoading函数
*/
//输入所有上传成功图片的结果集
console.log(res);
//通过返回res数据进行相应处理
}).catch(msg => {
/*
如Promise执行前添加wx.showLoading函数
执行完毕后此处必须执行wx.hideLoading函数
*/
console.error(msg);
});
}
})
三、Uniapp实现
同小程序实现方式一样,由于两者函数定义基本一致,这里涉及到的函数调用,所有wx修改成uni即可。
更多推荐
已为社区贡献2条内容
所有评论(0)