使用React Router Dom+Multer上传图片时req.file为undefined的问题

问题背景 #

使用react-router-dom的Form组件上传图片时，前端日志显示能正常获取File对象，但后端Node.js（multer）解析后req.file始终为undefined，无法完成图片上传。

错误原因分析 #

1. 前端请求格式错误：将FormData转为JSON发送，File对象无法被JSON序列化，后端根本接收不到文件二进制数据；同时手动设置了Content-type: application/json，与实际需要的multipart/form-data格式冲突。
2. 后端multer中间件未正确调用：uploadProductImage函数中仅声明了upload.single("image")，但未实际执行该中间件处理请求。
3. 后端缺少path模块引入：multerStorage中使用了path.extname，但代码未导入path模块，会导致运行错误。

修复步骤 #

1. 修复前端action代码 #

直接使用FormData发送请求，无需转为JSON，浏览器会自动处理正确的请求头：

export const action = async ({ request }) => {
    const method = request.method;
    const data = await request.formData();
    
    // 处理tags字段，转为JSON字符串传递
    const tags = data.get("tags");
    if (tags) {
        const tagArray = tags.split(",").map(tag => tag.trim());
        data.set("tags", JSON.stringify(tagArray));
    }

    // 处理subCategory字段
    const subCategoryValue = data.get('subCategory')
    if (subCategoryValue === "noSubCategory") {
        data.delete('subCategory');
    }

    const url = "http://127.0.0.1:3000/api/v1/products/create-products"
    const response = await fetch(url, {
        method: method,
        body: data // 直接发送FormData
    })

    if (!response.ok) {
        toast.error("上传失败，请重试")
    } else {
        toast.success("产品添加成功")
    }

    return redirect("/admin");
}

同时优化前端input的onChange（原代码处理无效，可选调整）：

<input type="file" id="image" name="image" onChange={(e) => console.log("选中文件:", e.target.files[0])} />

2. 修复后端控制器代码 #

• 引入path模块
• 正确调用multer中间件：

const multer = require("multer");
const path = require("path"); // 新增path模块导入
const Product = require("../Models/Product");
const catchAsync = require("../utils/CatchAsync");

const multerStorage = multer.diskStorage({
  filename: (req, file, cb) => {
    cb(
      null,
      file.fieldname + "-" + Date.now() + path.extname(file.originalname)
    );
  },
  destination: (req, file, cb) => {
    cb(null, "./public/uploads");
  },
});

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

// 正确调用multer中间件，直接返回中间件函数
exports.uploadProductImage = upload.single("image");

exports.createProduct = catchAsync(async (req, res) => {
  console.log(req.file); // 现在应该能拿到File对象
  const productData = {
    name: req.body.name,
    description: req.body.description,
    category: req.body.category,
    subCategory: req.body.subCategory,
    tags: JSON.parse(req.body.tags), // 解析前端传递的tags JSON字符串
    productImage: req.file.filename,
  };
  console.log(productData);

  const newDoc = await Product.create(productData);
  res.status(201).json({
    status: "success",
    data: {
      newDoc,
    },
  });
});

3. 路由配置注意事项 #

确保后端路由中先挂载uploadProductImage中间件，再挂载createProduct：

const express = require("express");
const router = express.Router();
const productController = require("../controllers/productController");

router.route("/create-products")
  .post(productController.uploadProductImage, productController.createProduct);

module.exports = router;

验证要点 #

• 前端发送请求时，检查Network面板中的请求是否为multipart/form-data格式，且包含文件数据。
• 后端控制台查看req.file是否有值，同时确保./public/uploads目录存在（multer不会自动创建目录，需手动创建）。

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