必须将enctype="multipart/form-data"写在<form>标签上并搭配method="POST",缺一不可;写在<input>等其他标签上无效,GET请求无法上传文件,后端依赖name属性接收文件字段。

要让 HTML 表单支持文件上传,enctype="multipart/form-data" 必须写在 <form> 标签上,并搭配 method="POST" —— 缺一不可。
必须设在 form 标签上,不能写在 input 里
enctype 是表单整体的编码方式声明,只对 <form> 有效。即使你只在一个 <input type="file"> 上操作,整个表单也得用 multipart 编码。写在 input 或 button 上不起作用。
- ✅ 正确:
<form enctype="multipart/form-data" method="POST"> - ❌ 错误:
<input type="file" enctype="multipart/form-data">(无效) - ❌ 错误:
<form enctype="application/x-www-form-urlencoded">(文件字段变空或 [object File])
必须搭配 method="POST"
GET 请求无法携带文件:URL 长度受限、无请求体、服务器通常直接拒绝。浏览器遇到 GET + file 输入,可能静默丢弃文件字段,或返回 405 错误。
- POST 是唯一可行方法,且 enctype="multipart/form-data" 只对 POST 生效
- action 地址要指向能处理文件上传的后端接口(如
/upload)
name 属性决定后端怎么取文件
后端靠 input 的 name 值识别文件字段。比如 <input type="file" name="avatar">,Node.js 的 multer 就用 req.file.avatar,PHP 用 $_FILES['avatar']。
立即学习“前端免费学习笔记(深入)”;
- 单文件:确保 name 值与后端接收逻辑完全一致(大小写敏感)
- 多文件:用
<input type="file" name="photos" multiple>,后端收到的是数组 - 混合提交:文本字段(如
<input name="title">)也要有 name,否则不会随文件一起发过去
别被 formenctype 搞混
formenctype 是按钮级覆盖属性,仅用于同一表单中不同提交方式的场景(例如一个按钮发纯文本,另一个发文件)。日常单功能上传表单,直接设 <form enctype="..."> 更清晰可靠。
- 普通上传不用它;用了也得保证对应按钮触发的是 POST 请求
- 若用 fetch 或 axios 手动提交,别手动设 Content-Type —— 让浏览器自动生成带 boundary 的 header



















