在使用 `fetch` 发送 `FormData` 请求时，浏览器会自动处理请求头中的 `Content-Type` 字段，并正确设置为 `multipart/form-data` 且包含 `boundary` 参数。开发者不需要手动设置该字段，否则会导致丢失 `boundary` 值，从而破坏表单数据的解析[^2]。 ### 浏览器自动生成 Content-Type 当使用 `FormData` 构造请求体并配合 `fetch` 发起 POST 请求时，无需显式设置 `Content-Type: multipart/form-data`。浏览器会根据请求体的内容自动添加完整的 `Content-Type` 头信息，包括必要的 `boundary` 标识符[^1]。例如： ```javascript const formData = new FormData(); formData.append('file', fileInput.files[0]); fetch('/upload', { method: 'POST', body: formData }); ``` 在这个示例中，尽管没有设置 `headers`，浏览器仍会将 `Content-Type` 设置为类似 `multipart/form-data; boundary=----WebKitFormBoundary...` 的格式，以确保服务器能够正确解析上传的数据[^2]。 ### 手动设置 Content-Type 的风险 如果在请求中显式设置了 `Content-Type: multipart/form-data` 而不包含 `boundary`，则可能导致请求头缺失关键参数，从而造成服务器端无法正确解析上传内容。由于 `fetch` 不会自动补全缺失的 `boundary`，这将导致数据损坏或上传失败。 以下是一个**错误示例**： ```javascript fetch('/upload', { method: 'POST', headers: { 'Content-Type': 'multipart/form-data' }, body: formData }); ``` 上述代码将发送一个不带 `boundary` 的 `Content-Type` 头，导致后端可能无法识别上传的数据结构，进而引发解析错误[^2]。 ### 正确做法：避免设置 Content-Type 为了确保文件上传正常工作，应完全省略对 `Content-Type` 的设置，让浏览器自动处理。这样可以保证 `FormData` 中的每一项都能被正确编码并带有正确的分隔符边界标识符。 ### 后端如何处理 multipart/form-data 数据 后端框架如 Express（Node.js）通常依赖中间件如 `multer` 来解析 `multipart/form-data` 类型的请求体。该中间件能够正确提取文件和其他字段，包括通过 `Blob` 添加的 JSON 元数据[^4]。例如： ```javascript const express = require('express'); const multer = require('multer'); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('file'), (req, res) => { const metadata = JSON.parse(req.body.metadata); console.log(metadata); res.sendStatus(200); }); ``` 在此示例中，即使未指定 `Content-Type`，后端也能正确解析上传的文件和元数据字段。 ---