React与Node.js实现文件上传时FormData数据无法传输到服务端问题

你提交表单使用的FormData对应multipart/form-data请求格式，Node.js（以Express框架为例）默认内置的请求解析中间件仅支持application/json和application/x-www-form-urlencoded格式，无法解析多部分表单数据，因此会出现req.body为空、文件字段为undefined的情况。

1. Node服务端配置解析中间件 #

我们使用multer作为多部分表单数据解析中间件：

• 首先安装依赖
  npm install multer
• 路由层添加中间件配置

import multer from 'multer';

// 配置文件存储规则，可选磁盘存储/内存存储
const storage = multer.diskStorage({
  // 上传文件存储目录，需要提前在项目根目录创建该文件夹
  destination: (req, file, cb) => cb(null, './uploads'),
  // 自定义文件名避免重复
  filename: (req, file, cb) => cb(null, `${Date.now()}-${file.originalname}`)
})

const upload = multer({ storage })

// 路由绑定中间件，单文件上传使用single方法，参数为你前端定义的文件字段名"file"
app.post('/memes', upload.single('file'), create)

• 修改控制器代码取值

export const create = (req: Request, res: Response, next: NextFunction) => {
    const file = req.file; // 单文件上传取req.file，多文件上传取req.files
    const bodyData = req.body;

    console.log(file); // 可获取到文件大小、路径、类型等完整信息
    console.log(bodyData); // 可获取到title、posterAddress等普通字段
};

2. React端注意事项 #

• 不要手动在fetch的headers中添加Content-Type: multipart/form-data，浏览器会自动为FormData请求添加该头并附带正确的boundary分隔符，手动添加会丢失boundary导致解析失败
• 提交前可通过formData.get('file')确认你传入的file是有效的File对象

如果使用的是Koa框架，替换中间件为koa-multer，配置逻辑基本一致。

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