必须先append文件再append普通字段，否则Express+multer等后端可能解析失败；文件须用File对象（如input.files[0]），禁用手动设置Content-Type，应由浏览器自动生成boundary。
FormData.append() 传文件和字段的正确调用顺序
必须先 append 文件，再 append 普通字段；否则部分后端（如 Express + multer）可能解析失败或丢弃字段。浏览器 FormData 的字段顺序会影响 multipart boundary 的生成顺序，而某些服务端解析器依赖该顺序识别文件区段。
常见错误现象：req.body 为空、req.file 存在但 req.body.xxx 缺失、上传后字段值变成 undefined。
- 文件必须用
File对象（如input.files[0]），不能传路径字符串或 base64 - 普通字段建议显式指定第三个参数（filename），避免被误判为文件：
formData.append('title', '报告v2', '') - 如果字段值是对象或数组，需先
JSON.stringify()再 append，后端自行解析
如何处理多文件 + 多字段混合提交
同一字段名多次 append 文件时，后端是否能收齐取决于解析中间件配置。例如 multer 默认只处理第一个同名文件，需用 array('files', 5) 显式声明支持多文件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 多文件统一用数组形式命名：
formData.append('attachments', file1); formData.append('attachments', file2); - 额外字段不要用和文件同名的 key，避免冲突（如别用
formData.append('attachments', 'notes')） - 字段值含中文时无需手动编码，
FormData自动使用 UTF-8 编码，但后端接收时要确保解析器启用encoding: 'utf-8'（如 multer 的storage配置）
fetch 上传时必须禁用 Content-Type
手动设置 Content-Type 会导致浏览器无法自动写入正确的 boundary，结果是后端收到乱码或解析失败。这是最常踩的坑。
正确做法是让 fetch 完全接管 headers：
- ✅ 正确：
fetch('/upload', { method: 'POST', body: formData })（不设 headers） - ❌ 错误：
headers: { 'Content-Type': 'multipart/form-data' }或任何手动设置 - ⚠️ 如果需要带认证 token，用
Authorization单独加：headers: { Authorization: 'Bearer xxx' }
调试 FormData 内容的实用方法
浏览器不直接暴露 FormData 的原始内容，但可通过构造请求预览实际发送的数据。
快速验证方式：
- 用
for (let [key, value] of formData.entries()) { console.log(key, value) }看键值对（注意：value 是File对象时只显示文件名+大小，不显示二进制） - 在 DevTools Network 面板中点开请求 → Headers → Request Payload，展开 multipart 数据块，确认 boundary 是否存在、字段是否按预期分隔
- 后端临时加
console.log(req.headers['content-type'])，检查是否为类似multipart/form-data; boundary=----WebKitFormBoundaryxxx
边界值（boundary）出错往往意味着你手写了 Content-Type，或者用了不兼容的 polyfill（比如某些旧版 axios 的 form-data 封装）。原生 FormData + fetch 组合最稳。
