React(TS)向Express上传图片失败，但可发送文本问题求助

核心问题 #

你的Express后端仅配置了bodyParser.json()和bodyParser.urlencoded()中间件，这两个只能解析JSON和URL编码的表单数据，完全无法处理包含文件的multipart/form-data类型请求——而前端上传图片时使用的FormData默认就是这种格式，导致后端根本接收不到image字段，上传自然失败。

修复步骤 #

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

multer是Express生态中专门处理文件上传的工具，先安装：

npm install multer

修改后端server.mjs代码：

import multer from 'multer';
// ... 保留原有的import代码

// 配置multer：这里用内存存储临时保存文件，适合小文件；如需存磁盘可改用diskStorage
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 保留原有文本解析中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

// 修改POST路由，添加upload.single('image')中间件（对应前端formData.append的字段名）
app.post('/', upload.single('image'), (req, res) => {
  const { feature } = req.body; // 文本数据仍从req.body获取
  const imageFile = req.file; // 文件数据由multer解析后存于req.file

  console.log(`Received text data:`, feature);
  if (imageFile) {
    console.log(`Received image:`, imageFile.originalname, `Size: ${imageFile.size} bytes`);
  } else {
    console.log('No image received');
  }

  res.status(200).send(`Data received successfully.`);
});

// ... 保留原有的GET路由代码

2. 前端补充文本数据（如需同时上传） #

如果要同时发送文本和图片，需把文本字段也加入FormData：

// 在handleImageSelected函数中修改FormData部分
const formData = new FormData();
formData.append('image', selectedImage);
formData.append('feature', '你的文本内容'); // 新增文本字段

3. 保留前端请求的正确格式 #

前端的fetch请求不需要手动设置Content-Type，浏览器会自动为FormData生成正确的multipart/form-data请求头（包含boundary分隔符），手动设置反而会导致解析失败，你当前的前端代码这部分是正确的，无需修改。

额外提示 #

如果需要将图片持久化到磁盘，可将multer的存储配置改为磁盘存储：

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 确保项目根目录下存在uploads文件夹
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`); // 用时间戳避免文件名重复
  }
});

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