MERN栈双图片表单更新报Cannot read property 'itineraryImage' of undefined错

问题根因 #

你遇到的报错本质是 req.files 为 undefined，所以读取其下的itineraryImage属性时抛出异常，我梳理了前后端代码里的所有问题，逐个对应修改即可：

1. 后端Multer配置不生效 #

Express中router.route()只接受路径作为第一个参数，上传中间件要写到对应的请求方法（put）的参数里，你现在把multer中间件写到router.route()的参数里完全不生效，这是req.files为undefined的核心原因：
错误写法

router.route("/update/:id" ,upload.fields([...])).put(async(req,res) =>{

正确写法

router.route("/update/:id").put(upload.fields([
    { name: 'itineraryImage', maxCount: 1 },
    { name: 'itineraryCoverImage', maxCount: 1 },
  ]), async(req,res) =>{

同时请确认你已经在路由文件顶部正确初始化了multer，示例：

const multer = require('multer');
// 测试阶段可以先用内存存储，生产环境可改为磁盘存储规则
const upload = multer({ storage: multer.memoryStorage() });

2. 后端缺失空值校验 #

如果用户更新行程时没有重新上传图片，req.files.itineraryImage 或者 req.files.itineraryCoverImage 就会不存在，直接访问[0].originalname也会报错，需要加兼容逻辑，没有新图就保留原有数据库中的图片值：

// 先查询原有行程数据
const oldItinerary = await Itinerary.findById(itinerary);
// 可选链判空，优先用新上传的图片，没有就用旧值
const itineraryImage = req.files?.itineraryImage?.[0]?.originalname || oldItinerary.itineraryImage;
const itineraryCoverImage = req.files?.itineraryCoverImage?.[0]?.originalname || oldItinerary.itineraryCoverImage;

3. 前端上传逻辑错误 #

你在useEffect拉取原有行程数据后，把数据库里存的图片字符串直接赋值给了文件对应的state，导致提交formData的时候，append的是字符串而不是File对象，multer识别不到该字段为文件，就会出现图片传不到后端的问题：
修改方案：

• 拆分图片state，分别存储原有图片的字符串、新选择的File对象
• 提交FormData时，只有当用户选择了新的File对象，才append对应的图片字段，否则不追加该字段，让后端使用原有值

4. 后端回调参数冲突 #

你当前findByIdAndUpdate的回调里写了(req,res)=>{}，会覆盖外层的res对象，导致响应返回失败，修改为：

const update = await Itinerary.findByIdAndUpdate(itinerary,itineraryDetails).then(()=>{
    res.status(200).send({status : "Itinerary Updated!"})
})

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