前言

江湖传闻：前端侠士祭出 FormData，刀光剑影之间，数据与文件齐飞跃向服务器。

奈何后端门派修炼未精，稍有差池，便将文件误作寻常招式对待，轻则上传失手，重则逻辑混乱，宛若武功尽废，笑柄传遍八方。

今日，贫道携 Express 上传秘籍出山，特来助诸君锤炼神功，一举问鼎江湖之巅！

简介

在前端，FormData如同江湖信使，既能捎带普通字段，又能带上二进制文件。

在后端，Express侠士（配合 express-fileupload 或 multer 神功）需要慧眼识珠，分清以下两者：

• req.body → 装的是普通字段，比如 user_id、width、height。
• req.files → 装的是文件真身，比如图片、文档、视频。

要点口诀：

字段归 body，文件归 files，各司其职，莫要乱套！

遇到问题

问题是这样：

前端使出 FormData 绝招，后端 Express 直奔 req.body.file 搜寻文件，却空无踪影，服务器直呼「文件跑哪儿去」。

细节复盘：

• FormData 格式是 multipart/form-data，不是普通的 JSON。
• Express 本体不会自动处理 multipart 类型，必须挂载专用中间件（如 express-fileupload、multer）。
• 二进制文件（图片、视频、文档）不会进入 req.body。
• 缺少中间件时，整个上传流程如同空手套白狼。
• 上传多文件时，字段名与中间件配置不一致，会出现空数组或无限“蒸发”。
• 中间件可设置存储目录和命名规则，按需保存，手到擒来。
• 文件超出大小限制，还会报 “Payload Too Large”，堪比武功重伤。
• 若未捕获异常，报错直回客户端，让使用者当场白眼。

打个比方，邮差背着大包裹到门口，你却跑客厅找快递单，结果空手而归。包裹藏在后院 req.files。想取真身？直奔 req.files，拿出你的“珍珠”！

解决方案

秘籍口诀再送一次：

“文件莫问 body，直接取 files！”

也就是说：

单文件上传：

多文件上传（数组形式）：

切记切记：

绝对不要用 req.body.file 来处理文件内容，否则，你会被江湖上嘲笑成“误入歧途”的武林外传！

操作步骤

出招有顺序，步步生莲：

1. 前端准备 FormData：

2. 发送请求（例如用 Axios）：

3. 后端设置 Express，搭配 express-fileupload 或 multer 中间件。

4. 取数据：

流程图

搞笑故事

某日，小明侠士初涉 FormData 上传之术，信心满满将教程原封不动搬进项目。前端信使风驰电掣到达后端，控制台一开，小明大呼“这招轻而易举”。结果 Express 门派不识生搬硬套之道，req.body.file 并无踪影。小明惊愕宛如丢剑街头，面色惨白，急得问道：“文件藏哪儿？”

掌门人冷眼相视，道：“何不问问 req.files？”小明羞愧无地安身，暗自反省武功未精。

幸得高人指点，方知二进制文件真身藏在 req.files，不在 req.body。小明按图索骥，配置中间件如行走江湖心法，一招制敌后再试。重启服务看日志，见上传记录如雪片飞舞，笑容灿若晨曦。这一役变成江湖笑谈，也警示后人职责分明不可懈怠。

从此江湖流传一句俚语：“字段在 body，文件在 files，切忌挠头！”小明将绝学刻于心间，挂载 express-fileupload 犹如操练内功心法，配置存储目录宛若炼丹设炉，再次挥动代码之剑，文件从 req.files 一现，光芒四射。

自此，文件上传稳如磐石，大小限制拦截如金钟罩护体。每当谈及文件上传，江湖侠士必引用此段笑谈以互勉：职责分明，方能行走前后端江湖不触雷区。

总结

FormData 上传，江湖必备神技，正确心法如下：

• 普通字段 → req.body
• 文件数据 → req.files
• 文件处理专属工具 → 配合 express-fileupload 或 multer

切记：绝对不要用 req.body.file 去摸文件，否则必废内力！

修炼至此，各位侠士必能笑傲前后端江湖，纵横捭阖，所向披靡！

学会此秘诀后，就能轻松读懂代码，秒杀 99% 的大厂程序员与技术大牛！