React发送FormData后Express API无法接收数据键的问题求助

你遇到的问题核心在于：后端没有配置解析multipart/form-data类型请求的中间件。当你用FormData发送请求时，请求的Content-Type是multipart/form-data，而默认的Express（我假设你用的是Express框架）并不会自动解析这种格式的数据，导致req.body为空，文件和表单字段都无法被后端捕获。

下面是具体的解决步骤：

1. 安装并配置multer中间件 #

multer是Express生态中专门处理multipart/form-data请求的工具，能帮你解析上传的文件和普通表单字段。

首先安装multer：

npm install multer --save

然后在你的API路由文件中配置multer（假设路由文件是routes/images.js）：

const express = require('express');
const router = express.Router();
const multer = require('multer');
// 先使用内存存储方便测试，后续可以改成磁盘存储指定文件路径
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 导入你的控制器
const imageController = require('../controllers/imageController');

// 给POST路由添加multer中间件，'imageSrc'对应你FormData里的文件字段名
router.post('/images', upload.single('imageSrc'), imageController.createImage);

module.exports = router;

2. 修改控制器代码 #

配置好multer后，上传的文件会被解析到req.file对象中，普通表单字段（比如你的post）会被解析到req.body里。调整控制器代码如下：

module.exports.createImage = function(req, res, next){
  // 先检查是否有文件上传
  if (!req.file) {
    return res.status(400).json({ message: '请上传图片文件' });
  }

  // 根据你的Image模型需求处理文件：
  // 如果是存文件路径，需要先把req.file保存到磁盘再传路径；
  // 如果是存base64格式，可以用req.file.buffer.toString('base64')
  Image.create({
    imageSrc: req.file.originalname, // 这里仅作示例，根据实际需求调整
    post: req.body.post
  }, function(err, image){
    if(err){
      return next(err)
    }
    res.status(201).json({ image, message: 'ok' });
  });
}

3. 前端小优化 #

你的前端FormData创建逻辑是对的，不需要手动设置Content-Type头——fetch会自动为FormData请求添加正确的Content-Type: multipart/form-data; boundary=xxx，手动设置反而会导致解析失败。

另外注意你的提交按钮：<a href="" onClick={this.handleSubmit}>里的href=""会触发页面刷新，建议改成href="#"或者在handleSubmit末尾加return false阻止默认跳转：

handleSubmit(e){
  e.preventDefault();
  // ... 现有代码逻辑

  fetch(/* ... */)
  .then(/* ... */)
  .catch(/* ... */);

  return false; // 阻止a标签的默认跳转行为
}

验证步骤 #

1. 重启后端服务
2. 重新上传文件，此时后端应该能正确获取到req.file和req.body.post
3. 检查数据库中的Image记录，确认数据已正确存储

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