formdata 提交失败时勿手动设置 content-type,否则丢失 boundary;混合提交注意 append 顺序与类型统一;fetch 后 response.json() 报错需检查响应头及内容;ie11 不支持 new formdata(form),应手动 append。

FormData 提交失败时,Content-Type 被自动设成 text/plain 怎么办
浏览器用 fetch 或 XMLHttpRequest 提交 FormData 时,如果手动设置了 Content-Type,反而会触发“禁用自动设置”的副作用,导致服务端收不到 boundary,解析失败。
- 不要手动设置
Content-Type—— 浏览器必须保留它为multipart/form-data; boundary=...才能正确分隔字段 - 用
fetch(url, { method: 'POST', body: formData })即可,body是FormData实例时,浏览器自动处理头信息 - 如果用了
axios,别写headers: {'Content-Type': 'multipart/form-data'},这会覆盖掉带boundary的真实值 - 后端收到空文件或字段缺失,大概率是前端强行设了
Content-Type导致 boundary 丢失
上传文件 + 普通字段混合提交,append() 顺序和类型要注意什么
FormData 不区分字段类型,但服务端框架(如 Express、Django、Spring)对同名字段的解析逻辑不同,顺序和重复调用 append() 会影响结果。
- 单个字段用
set()更安全,比如formData.set('title', 'xxx'),避免多次append()导致数组化 - 上传多个同名文件(如
photos[]),用append('photos', file1)、append('photos', file2),服务端才能收到数组 - 不要混用
append('id', 123)和append('id', '123')—— 字符串和数字在某些后端会被当作不同字段处理 - 如果字段含中文或特殊符号,不用额外编码:
FormData内部已按UTF-8处理,但服务端需确保接收逻辑支持 UTF-8 解码
用 fetch 提交 FormData 后,response.json() 报错 Unexpected token
常见于后端返回非 JSON 内容(比如 HTML 错误页、空响应、重定向),或者 Content-Type 响应头没设对,导致浏览器无法识别为 JSON。
- 先检查
response.headers.get('content-type')是否包含application/json,否则response.json()必然失败 - 服务端返回 400/500 错误时,很多框架默认返回 HTML 页面(如 Django 的调试页),而不是 JSON,前端要主动判断
response.ok - 不要跳过
await response.text()直接json()—— 可先打印原始响应体排查内容 - 若后端确实返回了 JSON,但含 BOM 或不可见字符(尤其 Windows 环境下生成的 JSON),
json()也会报这个错
IE11 不支持 FormData 构造函数传参,兼容写法怎么写
IE11 支持 FormData 对象,但不支持 new FormData(formElement) 这种构造方式,只能用无参构造 + 手动 append。
立即学习“前端免费学习笔记(深入)”;
- 不要写
new FormData(document.querySelector('form'))—— IE11 报TypeError: Not enough arguments - 兼容写法:先创建空实例
const fd = new FormData(),再遍历表单元素,用fd.append(name, input.value)或fd.append(name, input.files[0]) - 注意
input[type="file"]在 IE11 中不支持多选,files.length永远 ≤ 1,且files[0]为null时需判空 - 如果项目仍需支持 IE11,建议封装一个
serializeForm(form)工具函数,统一处理兼容性逻辑
boundary 缺失或 IE11 报错的时候。











