使用Multer上传图片后，/listing/:housetype路由无法显示图片

嘿，我来帮你搞定这个图片加载失败的问题！问题出在图片路径的相对/绝对引用上，咱们一步步来解决：

问题根源 #

你已经把upload文件夹通过app.use("/upload", express.static("upload"))设为了静态资源，这部分是对的。但问题在于：

• 当你在动态路由（比如localhost:3000/listing/condo）的页面里引用图片时，如果图片路径是相对路径（比如upload/xxx.jpg），浏览器会把它拼接成当前路由的子路径，也就是localhost:3000/listing/upload/xxx.jpg，这显然找不到资源。
• 你当前保存图片路径用的是req.file.path，这个值是服务器本地的相对路径（比如./upload/2024-05-20T12:34:56.789Zimage.jpg），直接渲染到前端会变成相对路径，导致错误。

解决方案 #

核心是让图片URL使用根路径开头的绝对路径，具体分两步：

1. 修正图片路径的存储逻辑 #

在保存图片到数据库时，不要存服务器本地的相对路径，而是存前端可以直接访问的绝对URL路径（/upload/文件名）。

2. 确保前端渲染时用绝对路径 #

在EJS模板里，直接使用数据库中存储的绝对路径即可，这样无论当前路由是什么，浏览器都会从根目录开始找资源。

具体代码修改 #

第一步：修正Multer的filename配置 #

先解决Windows系统文件名不支持冒号的潜在问题，同时保证文件名唯一：

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./upload/");
  },
  filename: function (req, file, cb) {
    // 替换ISO时间里的冒号，避免Windows系统报错
    const formattedDate = new Date().toISOString().replace(/:/g, '-');
    cb(null, formattedDate + file.originalname);
  },
});

第二步：修改注册接口的图片路径存储 #

把profileimg: req.file.path改成profileimg: '/upload/' + req.file.filename，存储绝对URL路径：

app.post("/", upload.single("profileimg"), (req, res) => {
  console.log(req.file);
  User.register(
    {
      username: req.body.username,
      fullname: req.body.fullname,
      phone: req.body.phone,
      email: req.body.useremail,
      role: req.body.role,
      // 替换成前端可直接访问的绝对路径
      profileimg: '/upload/' + req.file.filename,
    },
    req.body.password,
    (err, user) => {
      if (err) {
        console.log(err);
        res.redirect("/");
      } else {
        passport.authenticate("local")(req, res, () => {
          res.redirect("/home");
        });
      }
    }
  );
});

第三步：房屋图片上传同理（如果有） #

如果你有上传房屋图片的接口，也要做同样的修改，比如处理housepics字段：

// 示例：上传多张房屋图片的接口
app.post("/upload-house-pics", upload.array("housepics", 5), (req, res) => {
  const picPaths = req.files.map(file => '/upload/' + file.filename);
  // 将picPaths保存到houseSchema的housepics字段中
  House.findByIdAndUpdate(
    req.body.houseId,
    { housepics: picPaths },
    (err, updatedHouse) => {
      if(err) console.log(err);
      else res.redirect("/home");
    }
  );
});

第四步：EJS模板里直接使用绝对路径 #

在模板中直接引用数据库存储的路径即可，无需额外拼接：

<!-- 渲染用户头像示例 -->
<img src="<%= profileimage %>" alt="用户头像">

<!-- 渲染房屋图片示例 -->
<% houses.forEach(house => { %>
  <img src="<%= house.housedp %>" alt="房屋封面">
  <% house.housepics.forEach(pic => { %>
    <img src="<%= pic %>" alt="房屋图片">
  <% }) %>
<% }) %>

这样修改后，无论你在哪个动态路由下，图片都会请求正确的localhost:3000/upload/xxx.jpg路径，就能正常加载了！

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