未上传图片时触发Cannot read property 'image' of null错误求助

这个错误其实很常见，我来帮你拆解问题并给出解决方案：

问题根源 #

你遇到的TypeError: Cannot read property 'image' of null，本质是当用户没有上传任何文件时，express-fileupload中间件会把req.files设为null，而你的中间件直接去访问req.files.image——就像试图从空盒子里拿东西，自然会触发报错。

修复步骤 #

1. 修正中间件的判断逻辑 #

修改storePosts中间件，先确认req.files不是null，再检查image字段是否存在：

module.exports = (req, res, next) => {
  // 先判断req.files是否存在，再检查image字段
  if (!req.files || !req.files.image) {
    return res.redirect('/posts/new')
  }
  next()
}

2. 给路由处理函数加安全防护 #

为了避免中间件意外失效或者其他异常情况，建议在/posts/store的POST路由里也加上双重检查，同时处理文件移动和数据库创建的错误：

app.post("/posts/store", (req, res) => {
  // 双重保险：先确认文件存在
  if (!req.files || !req.files.image) {
    return res.redirect('/posts/new')
  }
  
  const { image } = req.files
  image.mv(path.resolve(__dirname, 'public/posts', image.name), (error) => {
    // 处理文件移动失败的情况
    if (error) {
      console.error('文件上传失败:', error)
      return res.redirect('/posts/new')
    }
    
    Post.create({ ...req.body, image: `/posts/${image.name}` }, (error, post) => {
      // 处理数据库创建失败的情况
      if (error) {
        console.error('创建文章失败:', error)
        return res.redirect('/posts/new')
      }
      res.redirect('/')
    })
  })
})

3. 前端辅助验证（可选但推荐） #

在前端的文件输入框加上required属性，让浏览器在用户未上传文件时阻止表单提交，减少后端的无效请求：

<div class="form-group mt-5">
  <input type="file" name="image" class="form-control-file" required>
</div>

注意：前端验证只能作为辅助，不能替代后端检查——用户可以通过修改HTML绕过前端验证，后端的校验才是最后一道防线。

这样修改后，当用户未上传图片提交表单时，就会被正确拦截并跳转到新建文章页面，不会再出现那个TypeError了。

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