HTML文件上传必须同时满足三个条件：input需有name属性、form需设enctype="multipart/form-data"、FormData.append()必须传原始File对象，缺一不可。
HTML 表单里 <input type="file"> 必须加 name 属性
没加 name，后端根本收不到文件——浏览器压根不提交这个字段。这不是可选，是硬性要求。
-
name值会作为后端接收时的键名（比如 Python Flask 的request.files.get("avatar")依赖它） - 如果用
multiple，name仍只需一个字符串，不要写成name="files[]"（那是 PHP 旧习惯，现代框架不认） - 别用
id代替name，它们作用完全不同：id仅用于 DOM 操作或<label for></label>
表单必须设 enctype="multipart/form-data"
默认的 application/x-www-form-urlencoded 会把文件转成乱码字符串，直接丢弃二进制内容。不设这个，上传永远为空。
- 只要表单里有
<input type="file">，就必须在<form></form>标签上显式声明enctype="multipart/form-data" - 即使只传一个文件、其他字段都是文本，也不能省
- 某些前端框架（如 Vue）动态渲染表单时，容易漏掉这个属性，提交前建议用 DevTools 检查
<form></form>的实际 HTML
后端接收不到文件？先确认浏览器是否真发出了数据
常见现象：前端选了文件、点了提交，但后端 request.files 或 $_FILES 为空。别急着改后端逻辑，先看请求本身。
- 打开浏览器 DevTools → Network → 找到对应请求 → 点开 → 切到 Payload 或 Request Body 标签页，确认里面有类似
------WebKitFormBoundary...的分隔段，且段内含Content-Disposition: form-data; name="xxx"; filename="yyy.jpg" - 如果整个请求体是纯 JSON 或 URL 编码格式（key=value&key2=value2），说明
enctype没生效，或 JS 用fetch手动构造了错误的 body - 检查控制台有没有
Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'这类报错——意味着你往FormDataappend 了 null 或字符串
用 FormData 手动上传时，文件对象不能二次读取
调一次 fileInput.files[0] 拿到的 File 对象，可以 append 到 FormData；但如果你先调 file.text() 或 file.arrayBuffer()，再想把它塞进 FormData，就失败了。
立即学习“前端免费学习笔记（深入）”；
-
FormData.append("file", file)是唯一推荐方式，其中file必须是原始File实例（来自input.files） - 不要试图用
new Blob([file])包一层再传——虽然类型看似对，但丢失了name和lastModified，部分后端解析会出问题 - 如果需要预览或校验，用
URL.createObjectURL(file)生成临时链接，而不是提前读取内容
