如何避免无附件文件时Express API因req.file未定义崩溃？

问题原因 #

当POST请求未附带文件时，req.file为undefined，直接访问req.file.filename会触发TypeError: Cannot read properties of undefined (reading 'filename')，导致API崩溃。

解决方案 #

1. 后端路由中判断文件是否存在 #

在创建Member对象时，先检查req.file是否存在，再决定image字段的值：

修改Express的POST路由代码：

router.post('/', upload.single('image'), async (req, res) =>{
    const member = new Member({
        name: req.body.name,
        occupation: req.body.occupation,
        bio: req.body.bio,
        join: req.body.join,
        // 若存在文件则取filename，否则设为null（需确保数据库image字段允许null）
        image: req.file ? req.file.filename : null
    })
    try {
        const newMember = await member.save()
        res.status(201).json(newMember)
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
})

2. 配套：确保数据库模型支持空值 #

以Mongoose为例，修改Member模型，允许image字段为空或设置默认值：

const memberSchema = new mongoose.Schema({
  name: { type: String, required: true },
  occupation: { type: String, required: true },
  bio: { type: String, required: true },
  join: { type: Date, required: true },
  image: { type: String, default: null } // 允许为空或自定义默认值
});

3. 前端可选优化（非强制） #

在Next.js提交逻辑中，仅当有图片时才向FormData添加image字段：

const submitHandler = (e) => {
    e.preventDefault()
    const formDatas = new FormData()
    formDatas.append('name', name)
    formDatas.append('occupation', occupation)
    formDatas.append('bio', paragraph)
    formDatas.append('join', date)
    // 仅当选择了图片时才添加字段
    if (img) {
        formDatas.append('image', img)
    }
    axios
      .post(api + '/members', formDatas)
      .then(res => console.log(res))
      .catch(err => console.log(err))
}

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