enctype="multipart/form-data"必须写在标签上，不能写在标签里；必须小写、拼写正确且配合method="post"，否则浏览器不发送文件二进制内容，后端req.files为空。

enctype="multipart/form-data"必须写在

上，不能写在里

很多人把 enctype 错误地加到 <input type="file"> 标签上，比如 <input enctype="multipart/form-data">，这完全无效。浏览器只认 <form></form> 标签上的 enctype 属性， 上的任何 enctype 都会被忽略。

常见错误包括：

• <form></form> 标签漏写 enctype → 后端收不到文件，req.files 或 request.FILES 为空
• <form enctype="mutlipart/form-data"></form> → 拼错 multipart，boundary 不生成，请求体里连 boundary= 都没有
• <form enctype="MULTIPART/FORM-DATA"></form> → 大小写混乱，虽 HTML 不区分大小写，但易被人工误判、IDE 报错、团队协作时引发歧义

method 必须是 post（或 put/delete），不能用 get

enctype="multipart/form-data" 依赖 HTTP 请求体（body）来传输分块数据，而 GET 请求没有 body —— 浏览器遇到 <form method="get" enctype="multipart/form-data"></form> 会直接忽略 enctype，退回到默认的 application/x-www-form-urlencoded 编码，导致 <input type="file"> 字段只传个 C:\fakepath\xxx.jpg 或空值，真实二进制内容根本没发出去。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

所以：

• 只要表单含 <input type="file">，method 就必须是 post（或 put、delete 等支持 body 的方法）
• 别试图用 GET + enctype “凑合”，它在规范和实现层面都行不通
• 即使你手动拼 URL 参数如 ?file=name.jpg，也只是传字符串，不是文件内容

用 fetch + FormData 时，enctype 属性本身不生效

如果你用 JS 拦截表单提交、构造 FormData 并调用 fetch，那 <form enctype="..."></form> 的值就只是摆设。真正起作用的是你创建的 FormData 实例：

• new FormData(formElement) → 浏览器自动设置 Content-Type: multipart/form-data; boundary=...
• fetch('/upload', { method: 'POST', body: new FormData(form) }) ✅ 正确
• fetch('/upload', { headers: { 'Content-Type': 'multipart/form-data' } }) ❌ 错误：手动设 header 但没提供 boundary，后端解析失败
• 不要同时手动设 headers 和传 FormData，否则会冲突

Chrome DevTools 里怎么快速验证 enctype 是否生效

上传失败时，问题往往不在后端日志，而在请求本身。打开 Chrome DevTools → Network → 找到上传请求 → Headers → 查看 Content-Type 字段：

• ✅ 正常应为：Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...
• ❌ 如果是：Content-Type: application/x-www-form-urlencoded → 说明 enctype 没生效（漏写、拼错、method=get、属性位置错）
• ❌ 如果是：Content-Type: multipart/form-data（没带 boundary=）→ 很可能是手动设置了 header 却没让浏览器自动生成 boundary
• 注意：Network 面板中“Preview”或“Response”看不到文件内容，要看“Headers”里的原始请求头

实际写的时候最容易被忽略的，是动态创建表单时忘记设 enctype。比如 const form = document.createElement('form') 后只设了 method 和 action，却没写 form.enctype = 'multipart/form-data' —— 这时候它还是默认的 application/x-www-form-urlencoded，文件照样传不上去。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！