在小程序中使用formdata上传数据,可实现多文件上传
在微信小程序中使用 FormData
上传文件,可以使用 wx.uploadFile
方法。以下是一个简单的实例代码,展示了如何使用 FormData
上传多个文件:
// 假设有一个按钮用来触发文件选择
<button bindtap="chooseFiles">选择文件</button>
// 在小程序的 .js 文件中
let files = []; // 用来存储选择的文件
// 选择文件的事件处理函数
chooseFiles() {
// 调用微信小程序的API选择文件
wx.chooseImage({
success: (chooseImageRes) => {
files = chooseImageRes.tempFiles; // 存储选中的文件
},
});
},
// 上传文件的事件处理函数
uploadFiles() {
// 循环文件数组,逐个上传
files.forEach((file) => {
const uploadTask = wx.uploadFile({
url: 'https://your-upload-api.com', // 你的上传API地址
filePath: file.path,
name: 'file', // 这里根据API的要求来定义
formData: {
'user': 'test' // 其他要上传的表单字段
},
success: (uploadFileRes) => {
console.log('upload success:', uploadFileRes);
},
fail: (error) => {
console.error('upload fail:', error);
},
});
// 如果需要,可以监听上传进度变化事件
uploadTask.onProgressUpdate((res) => {
console.log('上传进度' + res.progress + '%');
});
});
}
在这个例子中,我们首先定义了一个 chooseFiles
方法来处理文件选择。用户触发这个方法后,会调用 wx.chooseImage
来选择图片。选择的图片会被暂存在 files
数组中。然后,可以通过调用 uploadFiles
方法来上传这些文件。在 uploadFiles
方法中,我们使用 wx.uploadFile
来逐个上传这些文件,并可以附带其他表单数据。
注意:
- 这里的例子是上传图片,如果需要上传其他类型的文件,可以使用
wx.chooseFile
替换wx.chooseImage
。 - 你需要根据实际的API要求来定义
name
属性,它通常代表了API接收文件的字段名。 - 这个例子没有处理错误重试的逻辑,实际应用中可能需要加入重试机制。
- 上传文件时,可以监听
onProgressUpdate
来获取上传进度,并在需要时展示给用户。
评论已关闭