不用。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”，比服务端报错体验更好
实际项目里最常被忽略的，是服务端对 multipart 解析器的字段大小限制（如 Express multer 的 limits.fileSize、Nginx 的 client_max_body_size），前端一切正常，但文件一到网关就被截断——得前后端一起看日志。
