enctype必须显式写在<form>标签上且值为multipart/form-data、method为post,其他任何位置、大小写/拼写错误或搭配get均导致文件未发出;formenctype仅对type="submit"按钮生效,且不解决大文件上传稳定性问题。

enctype 必须显式写在 <form> 标签上,且值只能是 multipart/form-data,同时 method 必须为 post;其他任何位置、大小写错误、拼写错误或搭配 get 方法,都会导致文件根本没发出。
enctype 必须写在 <form> 上,不能写在 <input> 或 JS 里
浏览器只读取 <form enctype="..."> 这个声明。把 enctype 加到 <input type="file"> 上完全无效;用 JS 动态改 input.enctype 或 formElement.setAttribute('enctype', ...) 但没在提交前执行,也等于没设。
-
<form enctype="multipart/form-data"><input type="file"></form>✅ 正确 -
<form><input type="file" enctype="multipart/form-data"></form>❌ 无效 -
form.enctype = 'multipart/form-data'必须在form.submit()前执行,否则仍按默认编码提交
常见拼写和搭配错误直接导致 req.files 为空
后端收不到文件,90% 是前端 enctype 没生效。不是中间件配错了,是请求体里压根没二进制数据。
-
mutlipart/form-data(少一个 i)→ 浏览器当非法值,回退到application/x-www-form-urlencoded -
MULTIPART/FORM-DATA或multipart/Form-Data→ 虽然 HTML 不区分大小写,但易被误读、IDE 不提示、团队协作时难排查 -
<form method="get" enctype="multipart/form-data">→ GET 没请求体,浏览器静默丢弃文件字段,只发 URL 参数 - 不写
method→ 默认是get,等同于上一条
formenctype 是补充方案,不是替代方案
如果你需要同一个表单支持“仅提交文字”和“连同文件一起提交”,formenctype 才有用武之地。但它只对 <input type="submit"> 或 <button type="submit"> 生效,且必须满足:表单含 type="file"、method="post"。
立即学习“前端免费学习笔记(深入)”;
-
<input type="submit" formenctype="multipart/form-data">→ 点击时强制走 multipart -
<input type="submit" formenctype="application/x-www-form-urlencoded">→ 即使有文件字段,也会丢弃文件内容(只传文本) -
<button type="button" formenctype="...">→ 完全被忽略,因为不触发表单提交
真正容易被忽略的是:enctype 不解决大文件卡死、内存溢出或上传中断问题。它只负责让文件“能被发出”,而不是“稳被传完”。一旦文件超过几十 MB,就必须放弃原生 submit(),改用 File.slice() + fetch 分片上传——那时 enctype 就彻底不参与了。



















