不用。HTML表单enctype仅对直接提交生效,Ajax上传绕过该机制;关键要用FormData构造请求体,由浏览器自动设置含boundary的Content-Type,手动设置会破坏multipart格式。

用 XMLHttpRequest 上传文件时必须设置 enctype 吗?
不用。HTML 表单的 enctype 属性只在表单**直接提交**(非 Ajax)时生效;Ajax 上传完全绕过表单提交机制,所以 enctype="multipart/form-data" 对 XMLHttpRequest 无实际作用——它甚至会被忽略。
真正关键的是:必须用 FormData 构造请求体,并让浏览器自动设置正确的 Content-Type(含 boundary)。手动设 Content-Type 反而会破坏 multipart 格式。
- ✅ 正确做法:
const fd = new FormData();
fd.append('file', input.files[0]);
fd.append('name', 'report.pdf');
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
// 不要 setRequestHeader('Content-Type')!
xhr.send(fd); - ❌ 常见错误:手动设置
Content-Type: multipart/form-data,导致服务端收不到文件字段 - ⚠️ 注意:
FormData不能通过JSON.stringify()转换,也不支持直接赋值给xhr.send()的字符串参数
fetch 上传文件时如何监听进度?
fetch 本身不提供上传进度回调,但可通过 ReadableStream + TransformStream 手动拆包并计数,或更稳妥地回退到 XMLHttpRequest ——尤其在需兼容 Safari 15.4 之前版本时。
若坚持用 fetch,推荐封装一个带进度的包装函数:
立即学习“前端免费学习笔记(深入)”;
- 监听方式依赖
XMLHttpRequest.upload.onprogress,fetch没有等价 API - 可借助
formdata-polyfill或原生FormData+XMLHttpRequest组合实现稳定进度条 - 示例中不要用
fetch(...).then(r => r.json())直接处理响应,因为上传失败时可能返回 HTML 错误页而非 JSON,需先检查response.ok
服务端接收不到 file 字段?排查这三处
前端看似正常发送,但后端 req.files 或 $_FILES 为空,大概率不是跨域问题,而是字段名/结构不匹配。
- 确认
FormData.append()的第一个参数(字段名)和服务端预期一致,例如 Node.jsmulter默认期待file,PHP$_FILES['file'] - 避免重复 append 同名字段却不加索引,如
fd.append('file', f1); fd.append('file', f2),某些后端只取第一个 - 如果上传多个文件,建议用数组式命名:
fd.append('files[]', f1); fd.append('files[]', f2),再配合后端解析逻辑 - Chrome DevTools 的 Network → Payload 标签页里,点开请求可查看真实 multipart body,确认 boundary 是否存在、字段是否被包裹
移动端 iOS Safari 上传大文件卡住?
iOS Safari 对 XMLHttpRequest 上传有隐式限制:当文件 > ~50MB 且未设置超时或未监听 loadstart / progress 时,可能静默失败或长时间 pending。
- 务必设置
xhr.timeout = 300000(5 分钟),并监听timeout事件给出提示 - 即使不显示进度条,也建议注册
xhr.upload.onloadstart,否则某些 iOS 版本不会真正触发上传 - 避免在
input[type="file"]上直接用click()模拟唤起——iOS 需用户真实点击,否则files为 null - 上传前可用
file.size做客户端校验,比如提示“文件不能超过 100MB”,比服务端报错体验更好
multer 的 limits.fileSize、Nginx 的 client_max_body_size),前端一切正常,但文件一到网关就被截断——得前后端一起看日志。











