必须设为multipart/form-data,否则浏览器压根不发送文件二进制内容;该属性必须写在<form>标签上且大小写准确,搭配method="POST",动态创建表单时需提前设置,fetch提交时须用FormData实例而非手动设Content-Type头。

必须设为 multipart/form-data,否则文件根本不会发出——不是后端收不到,是浏览器压根没传二进制内容。
form 的 enctype 属性必须写在 <form> 标签上
它只对整个表单生效,不能写在 <input> 或按钮上,也不能靠 JS 动态补加来“挽救”。常见错误包括:
-
<form enctype="MUTIPART/FORM-DATA">:大小写混乱或拼错(如mutlipart),浏览器会忽略 -
<input type="file" enctype="multipart/form-data">:属性位置错误,完全无效 -
<form method="get" enctype="multipart/form-data">:GET 没有请求体,浏览器静默退回到默认编码,文件字段被丢弃
正确写法只有一种:<form action="/upload" method="post" enctype="multipart/form-data">
用 fetch 提交时,enctype 属性不起作用
此时起作用的是你传的 body 类型。只要用了 new FormData(form),浏览器会自动设置 Content-Type: multipart/form-data; boundary=...,且带正确分块结构。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记(深入)”;
- ✅ 正确:
fetch('/upload', { method: 'POST', body: new FormData(form) }) - ❌ 错误:
headers: { 'Content-Type': 'multipart/form-data' }—— 缺少boundary,后端解析失败 - ❌ 错误:
body: JSON.stringify(formData)—— 把FormData转成字符串,文件变[object File] - ⚠️ 注意:
FormData.append('file', input.files[0])第二个参数必须是File实例,不是input.value(那是只读路径)
后端拿不到文本字段?不是前端漏传,是解析方式错了
multipart/form-data 把文本字段和文件字段混在同一个请求体里,但结构不同。后端不能像普通表单那样读 req.body。
- Node.js Express:默认不处理,需用
multer;req.body和req.file才有值 - Python Flask:
request.form.get('username')读文本,request.files.get('avatar')读文件;字段名大小写敏感 - Java Spring Boot:
@RequestParam只收文本,@RequestPart才能收文件,混用就为空 - 调试线索:打开 DevTools → Network → 点请求 → Headers → 看
Content-Type是否含boundary=;不含说明前端没走对路
最容易被忽略的一点:enctype 是表单提交的硬性开关,不是可选配置。哪怕只加了一个 type="file",整个表单就必须切到 multipart/form-data,且 method 必须是 post(或其它带 body 的方法)。任何绕过它的“兼容写法”,最终都只会让文件消失在请求体里。


















