使用Axios通过FormData上传文件至服务器时出现undefined问题

你遇到的问题核心是Express 默认不支持解析 multipart/form-data 格式的请求，所以 req.files 才会是 undefined，必须借助文件上传中间件（比如 multer）来处理这类请求。

具体解决步骤 #

1. 安装 multer #

在服务器项目目录下执行：

npm install multer
# 或使用 yarn
yarn add multer

2. 配置并使用 multer 中间件 #

修改你的服务器代码：

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

// 配置 multer：这里用内存存储（适合小文件），也可配置磁盘存储路径
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 路由中使用 upload.single('file') 处理单文件上传（对应客户端append的'file'字段）
app.post("/api/uploadPostFiles", upload.single('file'), (req, res) => {
  // 现在 req.file 可拿到上传文件信息
  let uploadFile = req.file;
  const fileName = req.file.originalname; // 注意字段是originalname，不是name
  console.log(fileName);  
  console.log(uploadFile);
  
  // 后续业务逻辑...
  res.status(200).send('文件接收成功');
});

3. 客户端代码验证 #

你的React客户端代码没有问题：

• 无需手动设置 Content-Type，axios会自动根据FormData对象生成包含boundary的 multipart/form-data 请求头
• FormData的append方式正确，控制台打印的entries也能确认数据已正常添加

补充说明 #

如果需要处理多文件上传（比如你注释掉的forEach循环逻辑），只需将中间件替换为 upload.array('file', 5)（第二个参数为允许的最大文件数），之后用 req.files 即可拿到文件数组。

内容的提问来源于stack exchange，提问作者Alejo Garcia Misztal