Node.js使用multer上传图片报Cannot read property 'filename' of undefined如何解决

错误根因 #

你遇到的报错本质是req.file为undefined，导致读取它的filename属性失败，两个核心问题导致这个现象：

• 前端上传表单缺少必填的enctype属性，浏览器不会以文件流格式传输数据，multer无法解析到上传的文件
• 服务端接口没有对multer执行结果做错误校验、没有判断req.file是否存在就直接读取属性

修复方案 #

1. 修正前端HTML表单 #

给form标签添加enctype="multipart/form-data"属性，这是文件上传表单的必填配置：

<form action="/products/create" method="POST" enctype="multipart/form-data">
    <div>
        <label class="form-label" for="img">Select image:</label>
        <input class="form-input" type="file" id="img" name="img" required>
    </div>
    <!-- 需补充name、description对应的输入框，否则req.body读不到对应值 -->
</form>

额外提醒：你当前表单里没有name、description对应的输入控件，后续请求也会出现req.body读不到对应值的问题，需要补充对应的输入项。

2. 修正服务端接口逻辑 #

添加错误捕获和req.file存在性判断，避免未捕获的异常：

app.post('/products/create', (req,res) => {
    upload(req, res, (err) => {
        // 先捕获multer执行错误
        if (err) {
            return res.status(400).send('文件上传失败：' + err.message)
        }
        // 判空req.file
        if (!req.file) {
            return res.status(400).send('请选择要上传的图片')
        }
        const name = req.body.name
        const description = req.body.description
        const Filename = req.file.filename
        
        db.uploadPost(name, description, Filename, function(error){
            if (error) {
                return res.status(500).send('数据保存失败：' + error.message)
            }
            const id = this.lastID
            res.redirect('/products/'+id)
        })
    })
})

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