EJS配合Multer上传的图片无法渲染显示问题求助

你遇到的404错误是静态资源访问路径和实际存储路径不匹配导致的，具体有两个核心问题：

1. Express静态资源配置规则是：将public文件夹作为根目录暴露，访问路径不需要携带public前缀
2. 你存入数据库的图片路径包含public字段，导致前端请求地址多了一级/public，和实际暴露的路径不匹配

1. 确认server.js静态资源配置 #

确保你的入口文件server.js中已经添加了静态资源托管配置，该代码需要放在所有路由配置之前：

app.use(express.static('public'))

这行代码的作用是告诉Express，public文件夹下的所有内容可以直接通过域名+文件名访问，不需要额外编写路由逻辑。

2. 修改存入数据库的图片路径 #

你当前存的req.file.path值为public/uploads/xxx.jpg，实际可访问的路径应该是/uploads/xxx.jpg，修改blog.js中的saveArticleAndRedirect方法：

function saveArticleAndRedirect(path) {
    return async (req, res) => {
        let article = req.article
        article.title = req.body.title
        article.description = req.body.description
        article.markdown = req.body.markdown
        // 新增判断：只有上传了新图片才更新路径，避免编辑时不传图出现报错
        if(req.file) {
            // 直接拼接正确的访问路径，避免跨系统路径符号兼容问题
            article.image = `/uploads/${req.file.filename}`
        }
        try {
           article = await article.save()
           res.redirect(`/blog/${article.slug}`)
        } catch(e) {  
            res.render(`blog/${path}`, { article: article })
        }      
    }
}

3. （可选）修复文件名特殊字符问题 #

你当前使用new Date().toISOString()生成文件名，字符串中包含的:在Windows系统下是非法文件名字符，会导致上传失败，可以替换为合法字符：
修改blog.js中multer的filename配置：

filename: function (req, file, callback) {
    // 替换冒号为横杠，兼容全平台文件系统
    const timeStr = new Date().toISOString().replace(/:/g, '-')
    callback(null, timeStr + file.originalname)
},

提示：如果需要修复之前已经上传的旧图片，批量更新数据库中article表的image字段，把路径开头的public去掉即可。

修改完成后重新上传一张新图片，检查数据库中存储的image字段值为/uploads/xxx.jpg格式，前端即可正常加载图片，无需修改EJS中的img标签原有代码。

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