随着移动互联网的发展，小程序作为一种轻量级应用得到了广泛应用。在许多小程序中，图片上传功能是不可或缺的一部分。
通常情况下，小程序图片上传只支持单张上传，有时候我们有些需求，需要上传多张图片，这个就需要我们用变通的去处理，本文将详细介绍小程序图片多张上传的技术实现。
一、选择图片
小程序提供了wx.chooseImage API，允许用户从相册选择图片或拍摄新图片。这个 API 的基本使用方法如下：
wx.chooseImage({
count:1,// 默认9
sizeType: ['original','compressed'],// 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album','camera'],// 可以指定来源是相册还是相机，默认二者都有
success:function(res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
vartempFilePaths = res.tempFilePaths
}
})
二、上传图片
小程序提供了wx.uploadFile API，可以上传文件到服务器。这个 API 的基本使用方法如下：
wx.uploadFile({
url:'http://example.com/upload',// 你的服务器地址
filePath:'/tmp/a.png',// 需要上传的文件的路径，来自 chooseImage 的结果
name:'file',// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
formData: {
'user':'test'// HTTP 请求中其他额外的 form data
},
success:function(res){
vardata = res.data// 如果服务器返回数据，打印数据
}
})
由于上传API只能上传一张图片，所有我们封装一个方法，去遍历去处理图片，这个方法返回一个Promise，可以得到图片上传返回的url
export const uploadFile = (file: any) => {
let token = wx.getStorageSync('token');
return new Promise((resolve) => {
wx.uploadFile({
url: `${baseUrl}/wechat/file/upload`,
filePath: file.url,
name: name || 'file',
header: { token },
success(res) {
let result: any = {};
if (res && res.statusCode === 200) {
result = JSON.parse(res.data)
resolve(result);
},
fail() {
resolve({});
}
});
});
}
/**
*
* @param file 批量上传
*/
export const uploadFiles = (files: any[]) => {
const compressedImages = files.map((fileObj: any) => {
return uploadFile(fileObj);
});
return Promise.all(compressedImages);
}
我们选择多张图片的时候，会得到一个files图片地址集合，通过调用上面的uploadFiles 方法，将图片全部上传到服务器，并获得所有图片url列表，在提交页面表单的时候，我们才去提交图片：
// 图片上传
async imageUpload() {
wx.showLoading({ title: '上传中…' });
const files = this.data.fileList;
let res: any = await uploadFiles(files);
return Promise.resolve(res);
},
let images: any[] = await this.imageUpload();
images = images.filter(v => v.url);
if (images.length !== this.data.fileList.length) {
wx.hideLoading();
showError('图片上传失败，请检查或重试');
return;
}
let data: any = { images }
let res = await transportReceipt(data);
if (res.code === 200) {
wx.showToast({ title: '提交成功' });
setTimeout(() => {
wx.navigateBack();
}, 1500)
}
以上就是小程序多图片上传的基本流程。需要注意的是，这只是一个基本的实现，实际使用中可能需要考虑更多的问题，例如错误处理、进度显示、上传文件的类型和大小限制等。这些问题需要根据具体的需求和环境进行相应的处理。
