使用Axios+FormData上传图书信息时后端参数为undefined的问题

问题场景 #

开发图书管理应用时，通过FormData+Axios同时提交图书文本信息与封面图片，后端使用Express框架，但从req.body读取所有文本字段时均返回undefined。前端已正确构建FormData，后端仅配置了express.json()和express.urlencoded()中间件。

核心原因 #

Express默认的express.json()和express.urlencoded()仅能解析JSON、urlencoded格式的请求体，完全无法处理multipart/form-data类型的请求，这就是req.body为空的直接原因。必须使用专门处理文件上传的multer中间件来解析这类请求。

具体解决步骤 #

1. 安装multer中间件 #

在后端项目根目录执行命令：

npm install multer

2. 配置multer到server.js中 #

修改你的server.js，引入并配置multer，同时将其挂载到对应的路由上：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置存储方式：这里用内存存储适合小文件，如需持久化到磁盘可改用multer.diskStorage()
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

app.use(express.urlencoded({extended:true}))
app.use(express.json())
app.use(cors())

// 给图书添加路由绑定multer中间件，single('picture')表示接收名为picture的单个文件
app.post('/api/books/', upload.single('picture'), addBooks);

3. 修正后端控制器代码 #

现在可以从req.body读取文本字段，从req.file读取上传的图片文件，同时注意控制器参数应为req而非e：

const addBooks = (req, res) => {
    // 文本字段从req.body获取
    const { title, author, price, genreId } = req.body;
    // 图片文件从req.file获取
    const pictureFile = req.file;
    
    // 后续业务逻辑：比如保存图片到存储服务、保存图书信息到数据库
    console.log('图书基础信息:', title, author, price, genreId);
    console.log('封面图片详情:', pictureFile);
    
    // 返回成功响应
    res.status(200).json({ message: '图书添加成功' });
};

4. 前端请求优化（必做） #

不要手动设置Content-Type: multipart/form-data，Axios会自动根据FormData对象生成包含boundary分隔符的正确请求头，手动设置反而会导致解析失败。原前端请求代码保持原样即可：

const response = await axios.post("http://localhost:5000/api/books/", data, {
    headers:{
        Authorization:`Token ${authDet.accessToken}`
    }
})

验证注意事项 #

• 确认multer中间件已正确挂载到目标路由
• 控制器参数必须是req（请求对象），而非错误的e
• 前端FormData的字段名要和后端获取的字段名完全一致（比如genreId不能拼写错误）

内容的提问来源于stack exchange，提问作者Ashwin Prasad