React/Express项目中Multer文件上传出现file对象未定义错误求助

问题根源 #

你的代码存在三个核心错误：

1. 错误的中间件组合方式：const uploadFile = (upload.single("File"), (req,res, next)=>{...}) 使用了逗号运算符，导致upload.single("File")这个Multer中间件根本没有被执行，自然无法解析文件并挂载到req.file上。
2. 错误读取文件对象：你尝试从req.body获取文件，而Multer处理后文件信息是存放在req.file中的。
3. 缺失getFileExtention函数：代码中调用了该函数但未定义，会导致运行时错误。

修复方案 #

方案1：路由层挂载Multer中间件（推荐，保持职责分离） #

修改myCrudControllers.js

const asyncHandler = require("express-async-handler");
const multer = require("multer");
const fs = require("fs");

// 补上缺失的文件扩展名提取函数
function getFileExtention(mimetype) {
  return mimetype.split('/')[1];
}

// 确保uploads目录存在，避免Multer报错
fs.mkdirSync('./uploads', { recursive: true });

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
  filename: function (req, file, cb) {
    const extension = getFileExtention(file.mimetype);
    cb(null, `${file.fieldname}-${Date.now()}.${extension}`);
  },
});

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

// 正确的文件上传处理函数，读取req.file
const uploadFile = (req, res, next) => {  
  console.log("收到文件请求");
  const file = req.file;
  console.log(file);

  if (!file) {
    const error = new Error("未上传文件");
    error.httpStatusCode = 400;
    return next(error);
  }

  console.log("文件上传成功");
  // 添加响应逻辑
  res.status(200).json({
    success: true,
    message: "文件上传完成",
    fileInfo: {
      name: file.filename,
      originalName: file.originalname,
      size: file.size
    }
  });
};

// 导出upload中间件和处理函数
module.exports = { upload, uploadFile };

修改myCrudRoutes.js

在路由中同时挂载Multer中间件和处理函数：

const express = require('express')
const router = express.Router()
const { upload, uploadFile } = require('../controllers/myCrudContoller')

router.post('/catalog/files/upload/', upload.single("File"), uploadFile)

module.exports = router

方案2：控制器层导出组合好的中间件数组 #

如果希望把中间件和处理函数放在控制器里统一导出，可以修改myCrudControllers.js中的uploadFile定义：

// ... 其他代码不变

const uploadFile = [
  upload.single("File"),
  (req, res, next) => {  
    console.log("收到文件请求");
    const file = req.file;
    console.log(file);

    if (!file) {
      const error = new Error("未上传文件");
      error.httpStatusCode = 400;
      return next(error);
    }

    console.log("文件上传成功");
    res.status(200).json({
      success: true,
      message: "文件上传完成",
      fileInfo: {
        name: file.filename,
        originalName: file.originalname,
        size: file.size
      }
    });
  }
];

module.exports = { uploadFile };

此时路由文件无需修改，保持原代码即可：

const express = require('express')
const router = express.Router()
const { uploadFile } = require('../controllers/myCrudContoller')

router.post('/catalog/files/upload/', uploadFile)

module.exports = router

额外注意事项 #

• 前端上传时，必须将表单的enctype设置为multipart/form-data，并且文件输入框的name属性要和upload.single("File")中的参数一致（即name="File"）。
• 确保服务器有uploads目录的读写权限，否则会导致文件写入失败。

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