### 微信小程序中使用 `new FormData()` 实现文件上传的实现方式 在微信小程序中，`FormData` 的实现需要结合其特有的 API 来完成。虽然微信小程序并不直接支持原生浏览器中的 `FormData` 对象，但可以通过模拟的方式构造类似的结构，并通过 `wx.uploadFile` 或 `wx.request` 接口上传文件和参数。 以下是具体的实现方式： #### 1. 构造 `FormData` 数据 通过 JavaScript 模拟 `FormData` 对象的行为，将文件和非文件参数添加到一个对象中[^1]。 ```javascript let data = { age: 18, name: '张三' }; // 非文件参数 let fileList = [文件1, 文件2, 文件3]; // 文件列表 // 模拟 FormData 对象 let formData = { fields: {}, // 存储非文件参数 files: [] // 存储文件参数 }; // 添加非文件参数 for (let key in data) { formData.fields[key] = data[key]; } // 添加文件参数 fileList.forEach((file, index) => { formData.files.push({ name: `files[${index}].file`, // 键名 filePath: file.thumb, // 文件路径 type: 'image', // 文件类型 title: file.url // 其他附加信息 }); }); ``` #### 2. 使用 `wx.uploadFile` 上传单个文件 如果需要上传单个文件，可以使用 `wx.uploadFile` 接口[^1]。该接口专门用于上传文件，并支持附加参数。 ```javascript wx.uploadFile({ url: 'https://example.com/upload', // 后端接口地址 filePath: fileList[0].thumb, // 文件路径 name: 'file', // 文件对应的键名 formData: formData.fields, // 非文件参数 success(res) { console.log('上传成功:', res); }, fail(err) { console.error('上传失败:', err); } }); ``` #### 3. 使用 `wx.request` 上传多个文件 对于多文件上传，可以结合 `wx.request` 和后端支持的 `multipart/form-data` 格式。需要注意的是，`wx.request` 不直接支持文件上传，因此需要将文件内容转换为 Base64 或二进制数据后再传递。 ```javascript let baseUrl = getApp().globalData.basePath; let url = `${baseUrl}/upload`; // API路径 // 获取formData参数 let newData = formData.getData(); // 假设 getData 方法返回 contentType 和 buffer wx.request({ url: url, method: 'POST', header: { 'content-type': 'multipart/form-data', 'boundary': newData.boundary }, data: newData.buffer, // 二进制数据 success(res) { console.log('上传成功:', res); }, fail(err) { console.error('上传失败:', err); } }); ``` #### 4. 注意事项 - 确保 `formData.js` 和 `mimeMap.js` 文件在同一层级[^1]。 - 如果后端要求特定的字段格式（如嵌套对象），需要根据后端需求调整键名。 - 在多文件上传时，建议逐个调用 `wx.uploadFile`，以避免一次性上传过多文件导致的性能问题[^2]。 --- ### 示例代码 以下是一个完整的多文件上传示例： ```javascript function uploadFiles(fileList, formDataFields) { let promises = []; fileList.forEach((file, index) => { let promise = new Promise((resolve, reject) => { wx.uploadFile({ url: 'https://example.com/upload', filePath: file.thumb, name: `files[${index}].file`, formData: formDataFields, success(res) { resolve(res); }, fail(err) { reject(err); } }); }); promises.push(promise); }); return Promise.all(promises); } // 调用示例 let data = { age: 18, name: '张三' }; let fileList = [文件1, 文件2, 文件3]; uploadFiles(fileList, data).then(results => { console.log('所有文件上传成功:', results); }).catch(err => { console.error('上传失败:', err); }); ``` ---