不能直接用，除非只支持Chromium 128+ strict mode；当前Chrome 125+、Firefox 127+、Safari 17.5+仅实验性支持，Content-Type常降级为application/x-www-form-urlencoded，导致后端收不到JSON body。
formenctype="application/json" 在 Chrome/Firefox/Safari 里到底能不能用
不能直接用，除非你只支持 Chromium 128+ 且运行在 strict mode 下。当前（2026年9月）Chrome 125+、Firefox 127+、Safari 17.5+ 对 enctype="application/json" 的支持仍是实验性：浏览器会把字段序列化成 JSON 字符串，但 Content-Type 请求头大概率仍为 application/x-www-form-urlencoded，尤其遇到 target="_blank" 或重定向时直接降级。
常见错误现象：
- 写了
enctype="application/json"，抓包发现请求头是Content-Type: application/x-www-form-urlencoded - 后端收不到 JSON body，
req.body是空对象或被 urlencoded 中间件吞掉 - 字段名含方括号（如
user[name]）时，JSON 结构被错误扁平化成键值对 -
<input type="file">和enctype="application/json"同时存在 → 浏览器直接忽略该属性，退回到默认编码
formenctype 属性真正靠谱的用法只有这三种
formenctype 是给 <button type="submit"> 或 <input type="submit"> 用的，它只临时覆盖父 <form> 的 enctype，不是万能开关。实际能稳定工作的组合就三个：
-
formenctype="multipart/form-data"：配合<input type="file">使用，必须搭配method="post"；这是唯一能传文件的编码方式 -
formenctype="application/x-www-form-urlencoded"：纯文本提交（默认行为），适合用户名、邮箱等字段；无需额外配置中间件 -
formenctype="text/plain"：仅用于调试或表单预览，不推荐生产环境——后端几乎无法结构化解析
注意：formenctype 不支持多个值，也不接受空格或逗号分隔；写成 formenctype="multipart/form-data application/json" 会被浏览器完全忽略。
立即学习“前端免费学习笔记（深入）”；
含文件时怎么让 JSON 字段和文件一起提交
不能靠 enctype="application/json"，也不能混用 multipart/form-data 和 JSON 编码——HTTP 协议不允许多种编码共存于一个请求体。正确做法是：
- 保持
enctype="multipart/form-data"（必须） - 把 JSON 字段作为普通文本字段塞进
FormData：formData.append('metadata', JSON.stringify({tags: ["a", "b"]})) - 后端用 multipart 解析器（如 Express 的
multer）拿到req.body.metadata，再手动JSON.parse() - 别试图在
FormData里 append 一个对象，它只会调用.toString()→ 得到[object Object]
如果表单里既有文件又有大量结构化数据，优先考虑拆成两个请求：一个用 fetch 提交 JSON，另一个用原生表单提交文件（或都走 fetch + FormData）。
为什么 fetch() + event.preventDefault() 是事实标准
因为它是唯一能绕过浏览器编码限制、完全控制请求头和请求体的方式。关键不在“怎么写 fetch”，而在“怎么接管 submit”：
- 必须监听
submit事件并调用event.preventDefault()，否则表单先刷新/跳转，fetch 白执行 -
fetch的body必须是字符串：JSON.stringify({id: 1})，传对象会报TypeError: Request with GET/HEAD method cannot have body - 必须显式设置
headers: {'Content-Type': 'application/json'}，否则 Express/Spring Boot 不会触发@RequestBody解析 - 含文件？改用
FormData，此时Content-Type由浏览器自动生成 boundary，不能再手动设为application/json
最容易被忽略的一点：服务端若没检查 req.headers['content-type'] === 'application/json'，而是无条件走 urlencoded() 或 json() 中间件，就会漏掉整个请求体——这个逻辑必须前后端对齐。
