MERN栈使用multer上传多图片时报originalname未定义错误如何解决

错误原因 #

你使用multer的upload.fields()方法接收多文件上传时，上传的文件会被挂载到req.files对象上，而非单文件上传时的req.file对象。你的代码中直接访问req.file.originalname，此时req.file为undefined，因此触发类型错误。

修复步骤 #

1. 修改Node.js路由代码 #

将路由中创建newItinerary实例时的文件字段取值逻辑修改为从req.files中读取：

// 修改这两行代码
itineraryImage: req.files.itineraryImage[0].originalname,
itineraryCoverImage: req.files.itineraryCoverImage[0].originalname,

修改后的完整路由逻辑如下：

//Adding Itinerary
router.post(
  "/add", upload.fields([
    { name: "itineraryImage", maxCount: 1 },
    { name: "itineraryCoverImage", maxCount: 1 },
  ]),
  (req, res) => {
    const newItinerary = new Itinerary({
      itineraryId: req.body.itineraryId,
      itineraryDays: req.body.itineraryDays,
      itineraryName: req.body.itineraryName,
      itineraryDesc: req.body.itineraryDesc,
      // 替换原来的req.file为req.files对应字段
      itineraryImage: req.files.itineraryImage[0].originalname,
      itineraryCoverImage: req.files.itineraryCoverImage[0].originalname,
      itineraryClass: req.body.itineraryClass,
      itineraryPriceAdult: req.body.itineraryPriceAdult,
      itineraryPriceChild: req.body.itineraryPriceChild,
    });

    newItinerary
      .save()
      .then(() => {
        res.json("Itinerary Added");
      })
      .catch((err) => {
        console.log(err);
        res.status(500).json({error: err.message})
      });
  }
);

2. 可选优化（避免提交空文件报错） #

可以在取值前增加空判断，避免用户未上传文件就提交时再次触发错误：

if(!req.files?.itineraryImage?.[0] || !req.files?.itineraryCoverImage?.[0]) {
  return res.status(400).json({error: "请上传两张必填图片"})
}

3. 可选客户端优化 #

axios发送FormData时可以显式指定请求头，确保文件传输格式正确：

axios.post("http://localhost:8070/itineraries/add", formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

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