Angular前端PUT请求报错：Cannot read properties of undefined (reading 'image')

问题现象 #

在Angular应用中使用响应式表单编辑产品信息，后端通过multer.upload.fields处理单张主图和多张副图的文件上传。Postman测试PUT请求时，即使不上传新图片也能正常沿用旧图片URL完成更新；但前端表单不上传新图片时，后端抛出错误：

const file = req.files.image;^TypeError: Cannot read properties of undefined (reading 'image')

根因分析 #

前端在不上传新图片时发送的是普通JSON数据，此时multer不会解析出req.files对象（req.files为undefined），但后端代码直接访问req.files.image和req.files.images，未做前置判断，导致读取不存在的属性报错。

解决方案 #

方案1：后端代码兼容处理（最直接有效） #

修改后端PUT接口代码，在访问req.files的属性前先判断req.files是否存在，使用可选链操作符或条件判断避免报错：

router.put('/:id', uploadOptions.fields([{name: 'image',maxCount: 1},{name: 'images',maxCount: 10}]), async (req, res)=>{
    if (!mongoose.isValidObjectId(req.params.id)) {
        return res.status(400).send('Invalid Product Id');
    }
    const category = await Category.findById(req.body.category);
    if (!category) return res.status(400).send('Invalid Category');

    const product = await Product.findById(req.params.id);
    if (!product) return res.status(400).send('Invalid Product!');

    // 用可选链判断req.files是否存在，避免undefined报错
    const file = req.files?.image;
    let imagepath;
    const basePath = `${req.protocol}://${req.get('host')}/public/uploads/products/`;

    if (file) {
        const fileName = file.map(filename =>filename.filename) ;
        imagepath = `${basePath}${fileName}`;
    } else {
        imagepath = product.image;
    }

    // 同理处理多图
    const files = req.files?.images;
    let imagesPaths = [];
    if (files) {
        files.map((file) => {
            imagesPaths.push(`${basePath}gallery/${file.filename}`);
        });
    }
    else{
        imagesPaths = product.images
    }

    // 后续更新逻辑保持不变
    const updatedProduct = await Product.findByIdAndUpdate(
        req.params.id,
        {
            name: req.body.name,
            description: req.body.description,
            richDescription: req.body.richDescription,
            image: imagepath,
            images : imagesPaths,
            brand: req.body.brand,
            price : req.body.price,
            category: req.body.category,
            countInStock: req.body.countInStock,
            rating: req.body.rating,
            numReviews: req.body.numReviews,
            dateCreated: req.body.dateCreated
        },
        {new : true}
    ).then(productUpdated =>{
        if(productUpdated){
            res.status(200).json({message : 'Product updated!', product : {...productUpdated}})
        }
        else{
            res.status(400).json({success : false, message : 'Product did not update'})
        }
    }).catch(err =>{
        res.status(500).json({success : false, error : err})
    })
})

方案2：前端统一使用FormData发送请求（更规范） #

不管是否上传新图片，前端都用FormData封装请求数据，避免JSON和FormData两种格式切换，同时后端可以统一处理：

修改products.service.ts中的editProduct方法：

editProduct(id: string,name: string,description: string,richDescription : string,image : File | string,images: any = [], brand:string, price: any, category:Category,countInStock: any){
    const productData = new FormData();
    // 基础字段
    productData.append('id',id);
    productData.append('name',name);
    productData.append('description',description);
    productData.append('richDescription', richDescription);
    productData.append('brand',brand);
    productData.append('price',price.toString());
    productData.append('category',category.toString());
    productData.append('countInStock',countInStock.toString());

    // 处理主图：File对象传文件，字符串传旧URL
    if(typeof image === 'object'){
        productData.append('image',image,image.name);
    } else {
        productData.append('image',image);
    }

    // 处理副图：数组转JSON字符串传递
    if(Array.isArray(images)){
        productData.append('images',JSON.stringify(images));
    }

    this._http.put<{message : string; product : Product}>("http://localhost:3000/api/v1.0/products/" + id, productData)
    .subscribe(responseData => console.log(responseData))
}

对应后端需要调整多图的处理逻辑（解析JSON字符串）：

const files = req.files?.images;
let imagesPaths = [];
if (files) {
    files.map((file) => {
        imagesPaths.push(`${basePath}gallery/${file.filename}`);
    });
}
else{
    // 解析前端传的旧URL数组
    imagesPaths = req.body.images ? JSON.parse(req.body.images) : product.images;
}

说明 #

方案1只需修改后端代码，快速解决报错问题；方案2统一请求格式，让前后端交互更规范，避免后续类似兼容问题。可根据实际场景选择。

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