### 前端上传文件时如何正确设置form-data请求头 在前端开发中，上传文件通常需要使用 `multipart/form-data` 类型的请求头。以下是对该问题的专业解析： #### 1. 不手动设置 `Content-Type` 当使用 `multipart/form-data` 上传文件时，浏览器会自动生成一个复杂的边界字符串（boundary），用于区分不同字段的数据[^2]。因此，**不要手动设置 `Content-Type`**，否则会导致生成的边界字符串与实际数据不匹配，从而导致上传失败。 ```javascript const formData = new FormData(); formData.append('file', fileInput.files[0]); fetch('/upload', { method: 'POST', body: formData }); ``` #### 2. 使用 `FormData` 对象 在现代浏览器中，`FormData` 是处理 `multipart/form-data` 请求的标准方式。通过 `FormData`，可以轻松地将文件和文本数据添加到请求体中[^4]。 ```javascript const formData = new FormData(); formData.append('nickname', 'JohnDoe'); formData.append('image', fileInput.files[0]); // 添加文件 ``` #### 3. 避免在拦截器中设置全局 `Content-Type` 如果项目中使用了 HTTP 拦截器来统一设置请求头，需要注意的是，对于文件上传接口，应避免在拦截器中为所有请求设置 `Content-Type`。可以通过判断请求类型，仅对非文件上传接口设置公共请求头。 ```javascript axios.interceptors.request.use(config => { if (config.headers['Content-Type'] !== 'multipart/form-data') { config.headers['Content-Type'] = 'application/json'; // 默认值 } return config; }); ``` #### 4. 微信小程序中的特殊处理 在微信小程序中，由于缺乏原生的 `FormData` 支持，上传文件通常依赖 `wx.uploadFile` 方法。然而，如果需要发送包含其他字段的 `multipart/form-data` 请求，则可以通过手动拼接数据实现[^3]。 ```javascript function createFormData Boundary() { const boundary = `----WebKitFormBoundary${Math.random().toString().substr(2, 16)}`; let body = ''; body += `--${boundary}\r\n`; body += 'Content-Disposition: form-data; name="nickname"\r\n\r\n'; body += 'JohnDoe\r\n'; body += `--${boundary}\r\n`; body += 'Content-Disposition: form-data; name="image"; filename="example.jpg"\r\n'; body += 'Content-Type: image/jpeg\r\n\r\n'; body += fileArrayBuffer; // 文件的二进制内容 body += `\r\n--${boundary}--\r\n`; return { body, boundary }; } ``` #### 5. 后端接收 multipart/form-data 数据 后端需要配置相应的解析器来处理 `multipart/form-data` 格式的数据。例如，在 Node.js 中可以使用 `multer` 中间件[^4]。 ```javascript const express = require('express'); const multer = require('multer'); const upload = multer({ dest: 'uploads/' }); const app = express(); app.post('/submit', upload.single('image'), (req, res) => { console.log(req.body); // 文本数据 console.log(req.file); // 文件数据 res.send('File uploaded!'); }); ``` --- ### 注意事项 - 确保文件字段名与后端要求一致。 - 如果需要上传多个文件，可以多次调用 `formData.append` 方法或使用数组形式[^4]。 - 在微信小程序中，手动拼接 `multipart/form-data` 数据时需注意边界字符串的格式[^3]。 ---