HTML5不直接上传文件，需JavaScript用FormData组织数据并配合fetch发送至后端；FormData自动设置multipart/form-data，不可JSON.stringify，关键在前后端字段名一致及后端正确解析。
HTML5 本身不上传文件，它只提供 <input type="file"> 和 File / FileList API，真正把文件发到服务器的是 JavaScript 配合后端接口——没后端，光有 HTML5 标签一点用都没有。
怎么用 FormData 发文件给后端
这是最常用、兼容性好、支持多文件和额外字段的方式。关键不是“HTML5 怎么传”，而是“JS 怎么组织数据并发送”。
-
FormData会自动设置正确的Content-Type: multipart/form-data，不用手动拼 boundary - 必须用
fetch或XMLHttpRequest发送，不能靠表单默认提交（除非你真用<form enctype="multipart/form-data"></form>） - 别对
FormData调用JSON.stringify()——它不是普通对象，这么做会传空内容
示例：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', () => {
const file = input.files[0];
const formData = new FormData();
formData.append('upload', file); // 'upload' 是后端接收的字段名
formData.append('type', 'avatar'); // 可附带其他参数
fetch('/api/upload', {
method: 'POST',
body: formData // 注意：这里不设 headers，让浏览器自动设
});
});
fetch 传文件时为什么总 400 或 500
错误通常不出在前端代码，而出在后端没正确解析 multipart/form-data，或前端发错了字段名/结构。
立即学习“前端免费学习笔记（深入）”；
- 后端收到空文件？先确认
formData.append()用的键名和后端约定的一致（比如 Express +multer要匹配upload.single('xxx')中的'xxx'） - 报错
Unexpected end of form？常见于 Nginx 默认限制了请求体大小，需调大client_max_body_size - Chrome 控制台显示
net::ERR_CONNECTION_ABORTED？大概率是后端进程崩溃或超时，不是前端问题
大文件上传要不要用 FileReader
不需要。直接把 File 对象塞进 FormData 就行。FileReader 只在你要预览、切片、校验（如计算 hash）、或转成 base64 时才用。
- 用
FileReader读取大文件再发，会吃光内存，还拖慢上传——浏览器早就优化好了原生File的流式上传 - 想断点续传或进度控制？得配合后端支持分片，前端用
file.slice()切块，每块单独发，不是靠FileReader - 预览图片？
URL.createObjectURL(file)比FileReader.readAsDataURL()更轻量、可释放
真正卡住人的从来不是“怎么写那几行 JS”，而是前后端字段名对不上、Nginx 拦截了大包、或者后端框架根本没配好文件中间件——这些地方不查日志，光改前端代码毫无意义。
