Node.js项目中导航栏部分视图无法读取Mongoose虚拟图片路径问题

问题原因 #

Mongoose的虚拟属性默认不会被序列化到JSON结果中。你在服务端渲染完整视图时，是直接操作Mongoose返回的文档实例，所以可以正常读取虚拟属性；但搜索接口是把查询到的文档数组直接转成JSON返回给前端，默认会丢弃所有虚拟属性，所以前端拿到的item里没有SucculentImagePath字段，自然返回undefined。

解决方案 #

有两种常用的修复方案，按需选择即可：

方案1：全局配置Schema序列化时携带虚拟属性 #

在你的succulentSchema定义代码末尾，添加一行配置，开启JSON序列化时保留虚拟属性：

succulentSchema.set('toJSON', { virtuals: true })

这个方案修改成本最低，所有将该Schema文档转为JSON的场景都会自动携带虚拟属性，不需要修改其他业务代码。

方案2：搜索接口手动处理返回结果 #

如果你只需要在搜索接口返回该虚拟属性，不想全局修改配置，可以在接口查询完成后，手动为每个文档生成图片路径：

app.post("/searchSucculents", async (req, res) => {
  let payload = req.body.payload.trim();
  let search = await Succulent.find({SucculentName: {$regex: new RegExp("^"+payload+".*","i")}}).exec();
  // 限制搜索结果最多返回10条
  search = search.slice(0, 10).map(item => {
    // 手动转成普通对象并补充虚拟属性
    const obj = item.toObject()
    if (obj.SucculentImage != null && obj.SucculentImageType != null) {
      obj.SucculentImagePath = `data:${obj.SucculentImageType};charset=utf-8;base64,${obj.SucculentImage.toString('base64')}`
    }
    return obj
  })
  res.send({payload: search});
})

修改完成后重启服务即可正常获取到图片路径。

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