如何使用Node.js与EJS展示通过Multer上传的PDF文件？

1. 配置静态资源目录 #

无法访问PDF的核心原因通常是你没有把上传文件的存储目录注册为Express的静态资源路径，首先在Express入口文件（比如app.js）中添加配置：

const express = require('express');
const app = express();
// 第一个参数是外部访问的路径前缀，第二个参数是本地存储上传文件的文件夹路径
app.use('/uploads', express.static('uploads'));

配置完成后，所有存放在uploads文件夹下的文件，都可以通过域名/uploads/文件名的路径直接访问。

2. 校验Multer存储配置 #

要确保Multer存储文件时保留了正确的PDF后缀，避免文件名异常导致无法识别，参考配置：

const multer = require('multer');
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 和上方静态资源目录路径保持一致
  },
  filename: function (req, file, cb) {
    // 用时间戳加随机数避免重名，同时保留原始文件名和后缀
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    cb(null, uniqueSuffix + '-' + file.originalname)
  }
})
const upload = multer({ storage: storage })

文件上传成功后，把/uploads/生成的文件名路径存入数据库即可。

3. EJS模板渲染PDF #

有两种常用的展示方式可选择：

直接跳转打开PDF #

<!-- 假设后端传递的文件数据为file，file.path为存储的/uploads/xxx.pdf路径 -->
<a href="<%= file.path %>" target="_blank">打开PDF文件</a>

点击后会在新标签页调用浏览器自带的PDF阅读器打开文件。

嵌入页面内展示PDF #

如果要把PDF嵌在你的网站页面内部展示，用embed标签实现：

<div class="pdf-box">
  <embed src="<%= file.path %>" type="application/pdf" width="100%" height="800px" />
</div>

异常排查 #

• 检查项目根目录下是否存在uploads文件夹，不存在的话手动创建即可
• 如果配置了路由权限中间件，确保/uploads路径的访问没有被拦截
• 生成文件名时尽量过滤特殊字符，避免路由解析错误

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