Node.js+Vue.js使用multer上传图片后获取文件名含转义斜杠报错问题

• ORM字段类型配置错误：存储文件名的file字段在你使用的ORM框架（如Sequelize、Mongoose）中被定义为JSON类型而非字符串类型。写入字符串时ORM会自动执行JSON序列化，普通字符串会被包裹双引号，读取时就会出现首尾的转义双引号\"。
• 写入前冗余序列化操作：写入数据库前，代码意外对file.filename执行了JSON.stringify()，导致带引号的序列化结果被直接存入数据库。
• 接口返回时重复序列化：后端查询数据后返回给前端时，对字符串字段额外做了一次序列化，导致原本正常的文件名被加上转义引号。

临时快速修复 #

如果需要先解决前端加载报错的问题，可以在读取到文件名后先做一次JSON解析取出原始值，注意添加异常捕获避免空值报错：

// 示例：解析文件名
let filename = ''
try {
  filename = JSON.parse(rawFileValueFromDB)
} catch (e) {
  filename = rawFileValueFromDB || 'default-placeholder.png'
}

根治方案 #

• 修正ORM模型字段定义：将file字段的类型改为字符串类型（如MySQL的VARCHAR、MongoDB的String），修改后需要清理历史存量数据中自带的引号，避免旧数据异常。
• 写入前校验值：写入数据库前打印校验file.filename的值，确认是原生字符串再写入，示例代码：

const file = req.file; 
// 写入前校验值类型与格式
if (!file?.filename || typeof file.filename !== 'string') {
  return res.status(400).json({msg: '请上传合法图片'})
}
MentorProfile.create({
  file: file.filename,
  profession: req.body.profession,
  about: req.body.about
})

• 优化multer配置：原fileFilter配置只打印错误没有返回给前端，建议修改为将错误传入回调，接口可以直接返回错误响应：

const fileFilter = (req, file, cb) => {
  const allowedMimeTypes = ['image/jpeg', 'image/png']
  if (allowedMimeTypes.includes(file.mimetype)) {
    cb(null, true)
  } else {
    cb(new Error('仅支持上传JPG、PNG格式的图片'), false)
  }
}

• 前端增加容错处理：图片加载时添加错误回调，加载失败时显示占位图避免页面报错：

<template>
  <img 
    :src="`/images/${filename}`" 
    @error="handleImgError"
    alt="头像"
  >
</template>
<script>
export default {
  methods: {
    handleImgError(e) {
      e.target.src = '/images/default-avatar.png'
    }
  }
}
</script>

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