仅选择文件，需配合表单提交或 javascript 上传；表单须设 enctype="multipart/form-data" 和 method="post"，且 必须有 name；fetch 用 formdata 自动处理边界，禁手动设 content-type；文件校验须前后端双保险，file 对象不可长期持有。
直接用 <input type="file"> 不会上传文件，它只负责选择——必须配合表单提交或 JavaScript 才能发出去。
form 表单提交是最简路径，但必须设对两个属性
如果你只是想快速验证后端是否能收文件，用原生表单最省事，但以下两点漏一个就失败：
-
enctype="multipart/form-data"缺失会导致后端收不到文件二进制数据，只收到空字段 -
method="post"是硬性要求，GET无法携带文件内容 -
name属性不能省，比如<input type="file" name="avatar">，后端靠这个键名取文件 -
accept只是浏览器提示（如accept="image/png,image/jpeg"），不阻止用户绕过选错类型
fetch + FormData 是现代前端标配，别手动设 Content-Type
用 fetch 发送文件更可控，但容易在 headers 上栽跟头：
- 必须用
FormData包裹File对象，不能直接JSON.stringify或传字符串 - 绝对不要手动加
headers: { 'Content-Type': 'multipart/form-data' }—— 浏览器会自动生成带boundary的正确头，加了反而让服务端解析失败 - 额外字段（如用户 ID、分类）直接
formData.append('user_id', '123')即可，和文件一起发 - 示例关键行：
const formData = new FormData(); formData.append('file', file); fetch('/upload', { method: 'POST', body: formData });
文件大小和类型校验必须前后端双保险
前端检查只是用户体验优化，后端不校验等于裸奔：
- 前端可用
file.size > 5 * 1024 * 1024提示“超过 5MB”，但用户禁用 JS 后无效 -
file.type可被伪造，仅作参考；真正安全的方式是后端读取文件魔数（magic bytes）判断真实类型 - 后端必须限制单次请求体大小（如 Nginx 的
client_max_body_size）、临时目录权限、保存路径不可被 Web 直接访问 - 用户上传
shell.php这种名字？后端要重命名（如 UUID + 扩展名），并剥离原始文件名所有控制字符
最容易被忽略的是：前端拿到 input.files 后，如果没立刻读取或上传，用户切换页面或刷新，引用就丢了——别以为 File 对象能长期持有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
