React文件上传至Express后端无数据：API调用问题排查

我来帮你拆解问题根源，你现在的上传方式完全踩了文件传输的坑，下面一步步说清楚：

你的现有代码 #

后端API #

app.post('/api/v1/media', function (req, res) {
  console.log(req.body);
  res.json('api called');
});

React前端调用 #

const files = e.target.files;
console.log(files);
setLoading(true);
const res = await fetch(
  'http://localhost:4000/api/v1/media',
  {
    method:"POST",
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify(files[0])
  }
)
const file = await res.json();

问题出在哪？ #

1. File对象不能直接JSON序列化：你把files[0]这个File对象用JSON.stringify()处理，但File的核心属性（比如二进制数据、文件名）都是不可枚举的，序列化后直接变成空对象{}，后端自然拿不到内容。
2. 错误的请求格式：上传文件必须用multipart/form-data格式，而不是application/json——JSON根本不适合传输二进制文件。
3. 后端缺少文件解析能力：就算前端传对了，你的Express后端现在没有配置处理文件上传的中间件，还是没法解析请求里的文件内容。

修复方案 #

第一步：修改React前端的请求代码 #

改用FormData来携带文件，并且不要手动设置Content-Type（浏览器会自动添加正确的边界标识，避免格式错误）：

const files = e.target.files;
console.log(files);
setLoading(true);

// 创建FormData对象，把文件加进去
const formData = new FormData();
formData.append('image', files[0]); // 'image'是后端获取文件时的键名

const res = await fetch(
  'http://localhost:4000/api/v1/media',
  {
    method: "POST",
    body: formData // 直接传FormData即可
  }
)
const file = await res.json();

第二步：给Express后端加文件处理中间件 #

先安装最常用的multer中间件：

npm install multer

然后修改后端代码，用multer解析上传的文件：

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

// 配置multer：这里先把文件存在内存里，也可以改成存到磁盘
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 用upload.single('image')解析名为'image'的单个文件
app.post('/api/v1/media', upload.single('image'), function (req, res) {
  // req.file里是上传的文件详情，req.body是其他表单字段（如果有的话）
  console.log('上传的文件信息:', req.file);
  console.log('其他表单数据:', req.body);
  res.json({ message: '文件上传成功', fileInfo: req.file });
});

这样修改后，后端就能正确拿到上传的文件内容了。

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