ReactJS+Express项目如何处理图片undefined错误及设置默认图片

你遇到的TypeError: Cannot read property 'filename' of undefined错误是因为用户未选择图片就提交表单时，multer中间件没有解析到上传的文件，req.file为undefined，直接读取它的filename属性就会触发500错误。

报错修复方案 #

1. 后端补全参数校验，避免500错误 #

符合REST规范：客户端参数错误返回4xx状态码，服务端异常才返回5xx状态码，修改addImage控制器逻辑：

exports.addImage = (req, res) => {
    // 先判断是否有上传文件
    if (!req.file) {
        return res.status(400).json([{msg: '请选择要上传的产品图片'}]);
    }
    res.status(200).json({
        url: req.file.filename
    });
};

如果要恢复express-validator校验，注意调整中间件顺序：必须先执行multer解析form-data数据，再做校验，否则校验无法读取到文件信息：

// 路由修改示例
const { checkSchema } = require('express-validator');
app.post('/api/produit/addImage', 
    authenticateJWT,  
    upload.single('imageFile'), // 先执行multer解析
    checkSchema({
        imageFile: {
            custom: {
                options: (value, { req }) => !!req.file,
                errorMessage: '请上传产品图片'
            }
        }
    }),
    validatorHandler,
    produitController.addImage
);

2. 前端补全表单校验，提前拦截无效请求 #

在React的handleSubmit方法里新增图片非空校验，没选图片时直接提示错误，不发起接口请求：

const handleSubmit = event => {
    event.preventDefault();
    if (produit) {
        // 待实现更新功能
    } else {
        // 新增图片非空校验
        const imageFile = event.target.imageurl.files[0];
        if (!imageFile) {
            setErrorForm([{msg: '请选择产品图片'}]);
            return;
        }
        const formData = new FormData();
        formData.append('imageFile', imageFile);
        // 后续原有逻辑保持不变
    }
};

也可以直接给文件选择框加required属性，触发浏览器自带的必填提示：

<input
    accept='image/*'
    id="imageurl"
    name='imageurl'
    type="file"
    required
/>

未上传图片时设置默认图片方案 #

如果业务允许不上传图片也能创建产品，可通过以下逻辑实现兜底：

1. 提前把默认产品图片放到public文件夹下，比如命名为default-product.png
2. 修改addImage控制器逻辑，没有上传文件时返回默认图片地址：

exports.addImage = (req, res) => {
    let imageUrl = 'default-product.png'; // 默认图片路径
    if (req.file) {
        imageUrl = req.file.filename;
    }
    res.status(200).json({
        url: imageUrl
    });
};

3. 去掉/api/produit/create接口中imageurl的非空校验规则即可。

REST规范优化建议 #

当前你拆分两次请求创建产品的逻辑，可以合并为一次：直接在产品创建接口中用multer同时接收图片和其他表单参数，减少HTTP请求，也更符合REST单接口完成资源创建的规范。

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