enctype="multipart/form-data"必须写在<form>标签上且method必须为post,否则后端无法获取文件;前端设置需匹配后端解析中间件(如Express用multer、Flask用request.files)。

enctype="multipart/form-data" 必须写在 <form> 上,不是 <input>
很多人把 enctype 加到 <input type="file"> 标签里,或者只在 JS 里动态改 input.enctype —— 这完全无效。浏览器只认 <form enctype=""> 这个顶层声明。漏写或写错位置,后端 req.files、$_FILES 或 request.files.get("xxx") 就是空的。
method="post" 不能省,GET 下 enctype 被静默忽略
enctype="multipart/form-data" 在 GET 请求中根本不起作用。浏览器不会报错,但会降级成 GET /path?name=xxx,文件字段只剩文件名,二进制内容彻底丢弃。常见现象:表单提交返回 200,但日志里 req.files === {} 或 $_FILES["avatar"]["error"] === 4(UPLOAD_ERR_NO_FILE)。
后端解析中间件必须匹配前端编码格式
前端设了 enctype="multipart/form-data",只是让浏览器打包出带 boundary 的请求体;后端若没对应解析器,照样拿不到文件——不是 404,而是字段为空。
- Node.js + Express:必须用
multer,且app.post("/upload", multer().single("avatar"))中的"avatar"要和<input name="avatar">一致 - Python Flask:用
request.files.get("avatar"),但需确保没漏掉enctype和method="post" - Golang:调用
r.ParseMultipartForm(32 (32MB 限制),再用 <code>r.FormFile("avatar") - PHP:直接读
$_FILES["avatar"],但注意upload_max_filesize和post_max_size的 php.ini 配置
用 fetch 提交 FormData 时别手动设 Content-Type
手动设置 headers: { "Content-Type": "multipart/form-data" } 会导致浏览器禁用自动 boundary 插入,后端解析失败。正确做法是只传 FormData 对象,让浏览器自己加头:
立即学习“前端免费学习笔记(深入)”;
const fd = new FormData();
fd.append("avatar", fileInput.files[0]);
fetch("/upload", {
method: "POST",
body: fd // 不要加 headers
});
多文件上传时,<input name="photos" multiple> 对应后端接收方式因框架而异:multer.array("photos")、request.files.getlist("photos") 或 r.MultipartForm.File["photos"],不统一,容易漏查文档。



















