使用Rsuite Uploader上传图片至Express服务器，无法获取文件内容怎么办？

问题核心是Express默认不处理multipart/form-data类型的请求（也就是文件上传的表单数据），所以你需要使用multer中间件解析这类请求，才能拿到req.file或req.files对象。

步骤1：安装multer #

在你的Express项目中执行安装命令：

npm install multer

步骤2：配置multer并在路由中使用 #

在路由文件（或后端入口文件）中引入并配置multer，指定文件存储路径与命名规则：

const multer = require('multer');
const path = require('path');
const fs = require('fs');

// 配置文件存储逻辑
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 自动创建uploads目录（不存在时）
    const uploadDir = path.join(__dirname, 'uploads');
    fs.mkdirSync(uploadDir, { recursive: true });
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    // 生成唯一文件名，避免重复
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `${uniqueSuffix}-${file.originalname}`);
  }
});

// 创建multer实例，可限制仅接收图片文件
const upload = multer({ 
  storage: storage,
  fileFilter: (req, file, cb) => {
    if (file.mimetype.startsWith('image/')) {
      cb(null, true);
    } else {
      cb(new Error('仅支持图片文件上传'));
    }
  },
  limits: { fileSize: 5 * 1024 * 1024 } // 限制文件大小为5MB
});

然后在loadMap路由中注入该中间件，注意要和前端Uploader的name="map"对应：

// 假设你的路由定义如下，将upload.single('map')作为中间件传入
router.post('/loadMap', upload.single('map'), exports.loadMap);

步骤3：修改后端处理函数获取文件 #

现在loadMap函数中可以通过req.file拿到上传文件的完整信息，且文件已被multer自动保存到指定目录：

exports.loadMap = async (req, res, next) => {
  if (!req.file) {
    return res.status(400).json({ message: '未上传文件' });
  }

  // req.file包含所有文件信息
  console.log('文件存储路径:', req.file.path);
  console.log('原文件名:', req.file.originalname);
  console.log('文件大小:', req.file.size);

  // 后续可根据业务需求处理文件，比如返回文件信息给前端
  res.status(200).json({
    message: '文件上传成功',
    fileInfo: {
      filename: req.file.filename,
      originalName: req.file.originalname,
      storagePath: req.file.path
    }
  });
};

额外说明 #

• Rsuite Uploader默认会以multipart/form-data格式发送请求，无需额外配置。
• 如需上传多个文件，可改用upload.array('map', 5)（允许最多5个文件），此时用req.files获取文件数组。

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