表单必须同时设置 method="post" 和 enctype="multipart/form-data"，缺一不可；input type="file" 的 name 必须与后端接收名严格一致；多文件上传用 multiple 属性但 name 保持单数；前端校验不可信，后端须强制校验文件大小、mime 类型并安全存储；异步上传需用 formdata 且不手动设 content-type；后端必须配置对应解析中间件。
不加 enctype="multipart/form-data" 的表单，无论怎么选文件，后端都收不到——这是最常踩的坑，也是唯一绕不开的硬性要求。
form 必须设 method="post" 且 enctype="multipart/form-data"
这两个属性缺一不可，且必须写在 <form></form> 标签上，不能只写 <input type="file"> 就完事。
-
method="post"：GET 请求根本无法携带文件数据，URL 长度和编码方式都不支持，浏览器可能静默丢弃文件字段 -
enctype="multipart/form-data"：这是唯一能正确封装二进制文件的编码类型；用错（比如application/x-www-form-urlencoded或text/plain）会导致后端收到空文件或[object File]字符串 - 即使表单里混着文本字段（如
<input name="title">），也必须用multipart/form-data，所有字段会自动打包进同一个请求体
<input type="file"> 的 name 必须与后端接收名严格一致
后端靠这个 name 键来提取文件，拼错、大小写不匹配、带空格或中文，都会导致 Request.Files、$_FILES、request.files 等为空。
- 例如后端期望
uploadedFile，前端就得写<input type="file" name="uploadedFile"> - 允许多文件上传时，加
multiple属性，但name仍保持单数（如name="photo"），后端收到的是数组/列表 - 避免用
name="file[]"这类 PHP 风格写法，除非后端明确适配；现代框架（如 Express + multer、Flask、Spring Boot）通常按原始name值解析
前端校验只是辅助，关键限制必须由后端强制执行
accept 和 JavaScript 文件大小检查可以提升体验，但完全不可信——用户禁用 JS、手动构造请求、或绕过前端都能突破这些限制。
-
accept="image/*"或accept=".pdf,.docx"只控制文件选择对话框的过滤，不影响实际提交内容 - JS 校验示例：
if (file.size > 5 * 1024 * 1024) { alert("超 5MB"); return; }—— 这只能拦住普通用户，不能替代后端校验 - 后端必须做三件事：检查
Content-Length头防超大请求、解析文件头校验真实 MIME 类型（而非依赖filename后缀）、对字节流重命名并存入非 Web 可访问路径
异步上传要用 FormData，别手动设 Content-Type
用 fetch 或 XMLHttpRequest 提交时，如果手写 headers: { 'Content-Type': 'multipart/form-data' }，反而会破坏 boundary 生成，导致后端解析失败。
- 正确做法：创建
FormData实例，append文件和字段，直接传给fetch—— 浏览器会自动生成带正确boundary的Content-Type头 - jQuery 用户注意：
$.ajax默认会处理FormData，但必须设processData: false和contentType: false - Vue/React 等框架中，若用
@submit.prevent拦截表单，务必手动构造FormData，否则仍是普通 POST 请求
真正容易被忽略的，是后端解析 multipart 请求所需的中间件——Node.js 要 multer，Python Flask 要 request.files 显式调用，Java Spring 要 @RequestParam MultipartFile 注解。没配对，前端发得再准，后端也收不到文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
