如何在Express.js中解析React前端传递的对象？含文件上传场景

嘿，我来帮你搞定这个问题！Express默认没法直接处理multipart/form-data类型的请求（也就是你用FormData上传文件的场景），所以我们得借助multer这个专门处理文件上传的中间件——这也是Express生态里最常用的解决方案。下面一步步给你讲清楚怎么实现：

第一步：安装multer #

先在你的Express项目里安装multer：

npm install multer
# 或者用yarn
yarn add multer

第二步：配置multer并编写后端接口 #

我分两种情况给你示例：一种适配你当前的前端代码（每个文件用file0、file1这类字段名），另一种是更简洁的优化方案（统一字段名）。

方案1：适配你当前的前端代码 #

你的前端把每个文件分别append为file0、file1...，后端可以用upload.fields()来解析这些字段：

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

// 先确保存储文件的uploads文件夹存在，不存在就自动创建
const uploadDir = './uploads';
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}

// 配置multer的存储规则：自定义存储路径和文件名
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir); // 文件会存在项目根目录的uploads文件夹里
  },
  filename: (req, file, cb) => {
    // 用时间戳+原文件名，避免文件名重复覆盖
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

// 初始化multer实例
const upload = multer({ storage: storage });

// 处理文件上传接口
app.post('/file_upload', upload.fields([
  { name: 'file0', maxCount: 1 },
  { name: 'file1', maxCount: 1 },
  // 如果允许上传更多文件，继续添加类似的配置项
]), (req, res) => {
  // 上传的文件会存在req.files里，是一个对象，key对应你前端append的字段名
  console.log('上传的文件:', req.files);
  
  // 这里可以写你的业务逻辑，比如把文件信息存到数据库
  res.status(200).json({
    message: '文件上传成功',
    uploadedFiles: req.files
  });
});

app.listen(3001, () => {
  console.log('服务器运行在http://localhost:3001');
});

方案2：优化前端写法（更推荐） #

其实你可以把所有文件都append到同一个字段名（比如files），这样后端处理起来更简洁，不用逐个写字段名：

优化后的前端代码

handleDrop(files) {
  const data = new FormData();
  files.forEach((file) => {
    data.append('files', file); // 所有文件都用同一个字段名files
  });
  
  // 建议加上错误处理，避免上传失败无提示
  fetch('/file_upload', { method: 'POST', body: data })
    .then(res => res.json())
    .then(result => console.log('上传成功:', result))
    .catch(err => console.error('上传失败:', err));
}

对应的后端代码

// 前面的multer配置和方案1一致，只需要修改接口部分
app.post('/file_upload', upload.array('files', 10), (req, res) => {
  // 这里req.files是一个数组，每个元素都是上传的文件对象
  console.log('上传的文件列表:', req.files);
  
  res.status(200).json({
    message: '文件上传成功',
    uploadedFiles: req.files
  });
});

这里upload.array('files', 10)的第二个参数10是允许上传的最大文件数，你可以根据需求调整。

额外小提示 #

• 如果不需要把文件存到本地，而是要直接处理二进制数据（比如上传到云存储），可以用内存存储模式：

  const upload = multer({ storage: multer.memoryStorage() });
  

  这样文件的二进制数据会存在req.files[index].buffer里，直接拿这个buffer去上传即可。
• 如果前端和后端不在同一个域名下，记得配置跨域：安装cors中间件（npm install cors），然后添加：

  const cors = require('cors');
  app.use(cors());
  

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