如何解决Pug模板中已上传成功的图片无法正常显示的问题

问题根因&修复方案 #

1. 静态资源目录未配置 #

你的Express服务没有将uploads目录暴露为静态可访问路径，即使文件上传成功，浏览器也无法请求到对应资源。
在index.js的静态资源配置段添加以下代码：

// 配置uploads目录静态访问
app.use('/uploads', express.static(path.join(__dirname, './uploads')))
// 补充public目录静态配置，否则你的style.css也会加载失败
app.use('/public', express.static(path.join(__dirname, '../public')))

2. 模板中取值错误 #

你传给Pug模板的image是multer返回的完整文件对象，直接拼接路径会自动转为[object Object]，导致路径错误。需要取对象内的filename属性才是真实的存储文件名。
修改index.pug里的img标签：

img(src='/uploads/' + image.filename)

同时补充首次访问的兼容逻辑：GET首页路由渲染时传默认值{image: null}，模板内用条件判断只在上传后渲染img标签，避免首次打开页面报变量未定义错误。

3. 前端脚本语法错误 #

你写的DOM操作脚本存在多处语法错误，修正后代码如下：

script.
  document.addEventListener("DOMContentLoaded", function(event){
    const img = document.querySelector("img")
    if(img) {
      img.style.height = "50px";
      img.style.width = "50px";
      img.style.display = "block"
    }
  })

4. multer目录创建逻辑优化 #

原有fs.mkdir在目录已存在时会抛出异常，建议优化为以下写法：

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
       const uploadDir = './uploads/'
       fs.access(uploadDir, (err) => {
         if(err) {
           return fs.mkdir(uploadDir, { recursive: true }, (err) => cb(err, uploadDir))
         }
         cb(null, uploadDir)
       })
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + file.originalname); 
    }
})

以上修改完成后重启服务即可正常显示图片。

内容的提问来源于stack exchange，提问作者Nana aka y_chris