HTML5文件上传需通过FormData构造请求并用fetch发送，后端Express须用multer等中间件解析multipart/form-data，注意字段名匹配、大小限制及CORS预检配置。
HTML5 的
浏览器端不能直接“上传”文件到服务器，必须通过表单提交或 fetch/XMLHttpRequest 发送二进制数据。关键不是“HTML5 本身接收”，而是它提供现代 API（如 File、FormData）让前端能可控地组织上传请求。
常见错误是只写一个空 ，没绑定事件、没构造请求、没处理多文件——结果点选文件后什么也没发生。
- 单文件上传用
input.files[0]拿到File对象；多文件记得遍历input.files - 必须用
FormData包裹，否则后端收不到文件字段（fetch默认不设Content-Type，而FormData会自动设为multipart/form-data并带 boundary） - 不要手动设
Content-Type头，否则浏览器会删掉 boundary，后端解析失败
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
const file = input.files[0];
if (!file) return;
const formData = new FormData();
formData.append('upload', file); // 'upload' 是后端期待的字段名
const res = await fetch('/api/upload', {
method: 'POST',
body: formData // 不要加 headers: { 'Content-Type': ... }
});
});
后端怎么识别并保存 HTML5 传来的文件（以 Node.js + Express 为例）
Express 默认不解析 multipart/form-data，直接读 req.body 或 req.file 会是空的。必须加中间件，且注意中间件顺序和字段名匹配。
-
express本身不支持文件上传，得靠multer、busboy或formidable -
multer的single('upload')中的'upload'必须和前端formData.append('upload', file)的键名一致 - 上传路径需提前创建目录，否则
multer.diskStorage会报ENOENT - 别把
multer放在路由 handler 后面——中间件必须在app.post(...)之前注册
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/api/upload', upload.single('upload'), (req, res) => {
if (!req.file) {
return res.status(400).json({ error: 'No file uploaded' });
}
// req.file.path 是临时路径，需自行 mv 到目标位置
res.json({ path: req.file.path, size: req.file.size });
});
为什么上传大文件失败？前后端都要调哪些参数
默认情况下，Node.js HTTP server、Express、multer、Nginx（如有）都对请求体大小有限制，任一环节卡住都会导致 413 Payload Too Large 或静默中断。
立即学习“前端免费学习笔记（深入）”；
- 前端：浏览器无硬限制，但大文件建议加进度条和分片（用
File.slice()），否则用户无法感知卡在哪 - multer：
limits: { fileSize: 50 * 1024 * 1024 }（单位字节），超过抛MulterError: LIMIT_FILE_SIZE - Express：
app.use(express.json({ limit: '50mb' })); app.use(express.urlencoded({ limit: '50mb', extended: true }));—— 这俩不影响文件，但影响同请求里的其他字段解析 - Nginx：
client_max_body_size 50M;，放http、server或location块里
跨域上传时，后端 CORS 头漏了哪几项
带文件的 POST 请求属于“非简单请求”，浏览器会先发 OPTIONS 预检。如果后端没正确响应预检，连 POST 都不会发出，控制台只显示 CORS error，没有具体原因。
- 必须返回
Access-Control-Allow-Origin（不能是*+ credentials） - 必须返回
Access-Control-Allow-Methods: POST - 必须返回
Access-Control-Allow-Headers: Content-Type（因为FormData触发预检） - 如果前端用了
credentials: true（比如带 cookie），后端还需加Access-Control-Allow-Credentials: true，且 Origin 不能为*
最容易被忽略的是：OPTIONS 路由必须真实存在并返回这些头，不能只给 POST 路由配 CORS。
