使用Multer上传图片时req.file未定义的问题求助

问题场景 #

使用Multer实现图片上传，目标是将图片保存到uploads文件夹，同时将文件名存入数据库，但测试时req.file始终为undefined，导致报错无法读取filename。

相关代码 #

FoodRoutes 代码 #

import express from "express"
import { addFood } from "../controller/foodController.js"
import multer from "multer"

const foodRouter = express.Router()

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "uploads")
    },
    filename: function (req, file, cb) {
        cb(null, `${Date.now()} + "-" + ${file.originalname}`)
    }
})

const upload = multer({storage:storage})

foodRouter.post("/add", upload.single("image"),addFood)

export default foodRouter;

Controller 代码 #

import foodModel from "../models/foodsModel.js";
import fs from 'fs'

// add food item
const addFood = async (req,res) => {
    let image_filename = `${req.file.filename}`
    const food = new foodModel({
        name: req.body.name,
        description: req.body.description,
        price: req.body.price,
        category: req.body.category,
        image: image_filename
    })
    try {
        await food.save();
        res.json({success:true, message: "Thêm món ăn thành công"})
    } catch (error) {
        res.status(500).json({success:false, message: "Lỗi khi thêm món ăn", error})
    }  
}

export {addFood}

错误信息 #

file:///C:/Users/kienk/OneDrive/Desktop/Nh%C3%A1p/BanDoAn/server/controller/foodController.js:8
    let image_filename = `${req.file.filename}`
                                     ^

TypeError: Cannot read properties of undefined (reading 'filename')
    at addFood (file:///C:/Users/kienk/OneDrive/Desktop/Nháp/BanDoAn/server/controller/foodController.js:8:38)
    at Layer.handle [as handle_request] (C:\Users\kienk\OneDrive\Desktop\Nháp\BanDoAn\server\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\kienk\OneDrive\Desktop\Nháp\BanDoAn\server\node_modules\express\lib\router\route.js:149:13)
    at done (C:\Users\kienk\OneDrive\Desktop\Nháp\BanDoAn\server\node_modules\multer\lib\make-middleware.js:45:7)
    at indicateDone (C:\Users\kienk\OneDrive\Desktop\Nháp\BanDoAn\server\node_modules\multer\lib\make-middleware.js:49:68)
    at Multipart.<anonymous> (C:\Users\kienk\OneDrive\Desktop\Nháp\BanDoAn\server\node_modules\multer\lib\make-middleware.js:166:7)
    at Multipart.emit (node:events:519:28)
    at emitCloseNT (node:internal/streams/destroy:147:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:81:21)

Node.js v20.17.0
[nodemon] app crashed - waiting for file changes before starting...

解决步骤 #

1. 检查Thunder Client请求格式 #

• 必须选择multipart/form-data格式，禁止使用raw或x-www-form-urlencoded。
• 表单字段名必须和upload.single("image")中的image完全一致，注意大小写匹配。
• 确认已选中要上传的文件，无遗漏。

2. 验证Multer配置与文件夹权限 #

• 确认uploads文件夹存在于项目根目录（与server目录同级），不存在则手动创建。
• 检查文件夹读写权限：Windows右键文件夹→属性→安全，确保当前用户有写入权限；Linux/macOS执行chmod 755 uploads。
• 修正文件名拼接错误：当前代码会生成带多余符号的文件名，将${Date.now()} + "-" + ${file.originalname}改为${Date.now()}-${file.originalname}。

3. 添加错误捕获与调试 #

• 在路由中加入Multer错误处理，排查上传问题：

foodRouter.post("/add", (req, res, next) => {
  upload.single("image")(req, res, (err) => {
    if (err) {
      return res.status(400).json({ success: false, message: "上传失败", error: err.message });
    }
    next();
  });
}, addFood);

• 在Controller中先判断req.file是否存在，避免程序崩溃：

const addFood = async (req,res) => {
  if (!req.file) {
    return res.status(400).json({ success: false, message: "未上传图片" });
  }
  let image_filename = req.file.filename;
  // 后续代码不变
}

4. 检查Express中间件顺序 #

• 避免在文件上传路由之前使用express.json()或express.urlencoded()，这类中间件会干扰Multer解析multipart/form-data。可将这类中间件放在无需文件上传的路由之前，或不在文件上传路由前加载。

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