### 微信小程序中实现 `form-data` 上传多个文件的方法 在微信小程序开发过程中，可以通过 `wx.uploadFile` 接口实现单个文件的上传。如果需要上传多个文件，则需通过循环调用该接口完成操作[^1]。 以下是具体实现方式： #### 数据结构设计 为了支持多文件上传功能，通常会在页面的数据对象中维护一个用于存储待上传文件路径的数组。例如： ```javascript data: { upload: [] // 存储图片路径的数组 } ``` 当用户选择文件时，可通过回调函数更新此数组中的内容。例如，在用户点击按钮触发文件选择后，可将所选文件路径存入 `upload` 数组中[^1]。 #### 添加文件至数组 在实际应用中，可能使用第三方 UI 库（如 LinUI）提供组件简化交互逻辑。假设已集成相关组件并绑定其事件处理器，则可以在事件处理函数内部修改数据模型。例如： ```javascript onChangeTap(e){ this.setData({ upload: e.detail.all // 将所有选定文件加入到 upload 中 }); } ``` #### 提交表单数据 当准备向服务器发送请求时，除了文件本身外还可能存在附加字段（比如描述信息），这些都可以作为额外参数传递给服务端。下面展示了一个完整的提交过程示例代码片段[^1]: ```javascript submit(e){ const content = e.detail.value.content; // 获取输入框内的文本内容 const uploads = this.data.upload; // 取得当前保存的所有文件路径 uploads.forEach((item, index) => { // 遍历每一张照片执行单独上传动作 wx.uploadFile({ url: 'http://example.com/upload', // 替换为真实的服务端接收地址 filePath: item, name: 'file', formData:{ user:'testUser', content:content // 同步传入的文字说明等内容 }, success(res){ console.log(`第${index+1}张图片成功`, res); try{ var resultJson = JSON.parse(res.data); if(resultJson.code === 200){ // 成功后的业务逻辑... } }catch(error){ console.error("解析返回值失败", error); } }, fail(err){ console.warn(`第${index+1}张图片失败`, err); } }) }); } ``` 需要注意的是，每次调用 `wx.uploadFile` 是异步的操作，因此对于批量任务建议考虑并发控制或者顺序化管理策略以提高用户体验和稳定性[^1]。 另外，记得按照实际情况调整 API 地址以及相应 header 设置等细节部分。 --- ### 注意事项 - **网络状态检测**: 开始大流量传输前最好先确认设备联网状况良好。 - **权限申请**: 如果涉及相册访问等功能模块，请确保提前获得必要的授权许可。 - **错误重试机制**: 对于可能出现超时等问题的情况增加适当的异常捕获与恢复手段很有必要。