Node.js Multer上传图片后无法显示问题求助

我一眼就发现了导致图片无法显示的核心问题——你在代码里犯了一个拼写错误，这直接让图片路径变成了/uploads/undefined，浏览器自然找不到对应的文件！

1. 核心错误：属性名拼写错误 #

在app.js的上传成功回调中，你写了req.file.filname，但正确的属性名应该是req.file.filename（少了一个字母'e'）。这个小失误导致模板里的file变量拼接后变成uploads/undefined，所以访问路径就是/uploads/undefined，返回404错误，页面显示损坏的图片图标。

修正后的代码片段（app.js） #

// 原错误代码
// res.render('index', { msg: 'File uploaded successfully!', file: `uploads/${req.file.filname}` });

// 修正后
res.render('index', { msg: 'File uploaded successfully!', file: `uploads/${req.file.filename}` });

2. 可选优化：提升代码健壮性 #

除了核心错误，还有两个小细节可以优化，让你的代码更稳定：

（1）确保图片路径的正确性 #

在index.ejs的图片标签中，建议给路径加上根目录斜杠/，避免相对路径可能带来的问题：

<!-- 原代码 -->
<!-- <img src="<%= typeof file != 'undefined' ? file : '' %>"class="img-responsive"> -->

<!-- 修正后 -->
<img src="<%= typeof file != 'undefined' ? '/' + file : '' %>" class="img-responsive">

（2）优化文件扩展名验证 #

你的sanitizeFile函数中，用file.originalname.split('.')[1]获取扩展名，如果文件名包含多个点（比如my.image.png），会错误地取到中间的image而不是png。可以改成取最后一个扩展名：

function sanitizeFile(file, cb) {
 // Define the allowed extension
 let fileExts = ['png', 'jpg', 'jpeg', 'gif']
 // 获取最后一个扩展名，处理文件名含多个点的情况
 let fileExtension = file.originalname.split('.').pop().toLowerCase();
 // Check allowed extensions
 let isAllowedExt = fileExts.includes(fileExtension);
 // Mime type must be an image
 let isAllowedMimeType = file.mimetype.startsWith("image/")
 if (isAllowedExt && isAllowedMimeType) {
 return cb(null, true) // no errors
 } else {
 // pass error msg to callback, which can be displayed in frontend
 cb('Error: File type not allowed!')
 }
}

修复后的效果 #

修正拼写错误后，上传成功时模板会生成正确的图片路径（比如/uploads/1620000000000-myimage.png），浏览器就能正常加载并显示图片了。

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