使用Multer、React、Node.js、Sequelize、PostgreSQL无法访问上传照片

问题根因梳理 #

你的代码存在4个核心问题导致无法正常显示头像：

• Multer存储配置错误，磁盘保存的文件名和数据库存储的文件名不匹配
• Express没有配置静态资源托管，外部无法访问服务器上存储的图片文件
• 数据库仅存储了文件名，前端直接将文件名作为图片src无法正常寻址
• 上传成功后没有刷新前端的用户信息，展示的还是旧数据

修复步骤 #

1. 修正Multer存储配置 #

将原服务端的Multer配置从dest模式改为storage自定义模式，保证磁盘存储的文件名和你拼接的文件名一致，同时使用绝对路径避免存错目录：

// 替换原有multer配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 用绝对路径确保存储位置正确，需根据你的项目目录调整__dirname的相对层级
    cb(null, path.join(__dirname, '../public/uploads/'))
  },
  filename: function (req, file, cb) {
    const profileImage = file.fieldname + '-' + Date.now() + path.extname(file.originalname)
    cb(null, profileImage)
  }
})
const upload = multer({ storage: storage })

2. 配置Express静态资源托管 #

在Express入口文件（通常是app.js/index.js）中添加静态目录托管代码，让public目录下的资源可以被外部访问：

// 需放在路由注册之前
const path = require('path')
app.use(express.static(path.join(__dirname, 'public')))

配置完成后，public/uploads下的图片可以通过http://localhost:4001/uploads/文件名的格式访问。

3. 修正头像地址存储逻辑 #

二选一即可：

• 服务端存储完整访问路径：在更新profileImage字段时，拼接完整的访问地址再存入数据库

  // 服务端profile-pic接口内修改
  const profileImage = `http://localhost:4001/uploads/${file.filename}`
  await user.update({ profileImage });
  

• 前端统一拼接地址：前端渲染头像时，给文件名拼接服务端地址前缀

  // 客户端Profile组件的img标签修改
  <img
    src={`http://localhost:4001/uploads/${profileInfo.profileImage}`}
    alt='用户头像'
  />
  

4. 上传成功后刷新用户数据 #

上传成功后重新拉取最新的用户信息，更新redux里的profileInfo数据，保证前端展示最新头像：

// 客户端changeProfilePic函数内修改
const response = await fetch(
  'http://localhost:4001/user/profile-pic',
  {
    method: 'PUT',
    headers: { token: localStorage.token },
    body: data,
  }
);
if (response.ok) {
  toast.info('Profile Photo Changed');
  setProfileInfo(dispatch); // 新增这行刷新用户数据
}

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