必须同时设置form的enctype="multipart/form-data"和method="post"，否则文件无法上传；get不支持二进制数据，application/x-www-form-urlencoded会破坏原始字节流。
不设 enctype="multipart/form-data"，<input type="file"> 就根本传不了文件——浏览器会把文件当普通字符串发过去，后端收不到二进制数据。
form 的 enctype 和 method 必须同时为 multipart/form-data 和 POST
这是硬性前提，不是可选项。GET 不支持大体积二进制数据，而默认的 application/x-www-form-urlencoded 会把文件内容转成 URL 编码字符串（比如空格变 %20），彻底破坏原始字节流。
-
method="GET"：直接失效，连event.target.files都可能被忽略 -
enctype缺失或写错（如multipart/form-data多了个空格）：后端收到的是空文件或解析失败 - 用
<button type="submit"></button>触发时，必须确保它在<form></form>内部，否则不会携带 enctype 编码逻辑
accept 属性只起提示作用，不能替代服务端校验
accept="image/*" 或 accept=".pdf,.docx" 只会影响文件选择对话框的过滤界面，用户仍可通过“所有文件”绕过；且 Safari 对 MIME 类型支持较弱，accept="image/jpeg" 在某些版本里不生效。
- 前端可用
file.type做快速拦截，但不可信——它来自文件扩展名或浏览器猜测，伪造成本极低 - 真正可靠的判断靠服务端读取文件头（magic bytes），比如检查前 4 字节是否为
89 50 4E 47（PNG） - 如果需要强约束，建议搭配
multiple+ JS 校验：遍历event.target.files，对每个file检查file.size和file.name后缀
用 FormData 上传时，name 属性决定后端接收字段名
表单直提交靠 <input name="avatar">，而 JS 异步上传靠 formData.append("avatar", file) ——这两个 "avatar" 必须一致，否则后端拿不到数据。
- PHP 中通过
$_FILES["avatar"]访问；Node.js 的multer中配置upload.single("avatar") - 若用
multiple上传多个文件，formData.append("files[]", file)的[]是 PHP 特有语法，其他语言需按数组方式处理（如 Express 中upload.array("files")） - 不要漏掉
Content-Type: multipart/form-data; boundary=...——但FormData会自动设置，手动 fetch 时别覆盖它
required 属性对 <input type="file"> 的行为很微妙
它只校验用户是否「点击过选择按钮并选中至少一个文件」，但不校验文件是否真的被读取或上传成功。更麻烦的是：如果用户点开对话框又取消，required 会认为已触发、不再报错。
- 真实场景中，建议用 JS 监听
change事件，显式检查input.files.length > 0 - 提交前再次验证，避免用户改 DOM 绕过
required - 移动端 iOS 上，
required对<input type="file">支持不稳定，部分 Safari 版本完全不触发校验
最容易被忽略的是：文件上传不是“点了提交就完事”，而是涉及编码格式、字段命名、边界符、服务端解析器配置四个环节的链路。任一环出错，都会表现为“后端收不到文件”或“$_FILES 为空”，但错误位置往往不在你怀疑的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
