在 Web 开发过程中，文件上传和文件资源访问是必不可少的功能。而 Express.js 是 Node.js 的一种 Web 应用程序框架，提供了方便快捷的处理文件上传和文件资源访问的方法和工具。在这篇文章里，我们将介绍如何使用 Express.js 来实现文件上传和文件资源访问的功能。
文件上传
在 Express.js 中，可以通过 Multer 中间件来处理文件上传。Multer 是一个 Node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它基于 Busboy 构建，能够处理多个文件同时上传，并为每个文件生成一个对象，包含了文件的大小、路径和 MIME 类型等信息。
安装 Multer
可以通过 npm 命令来安装 Multer：
npm install multer --save
构建上传表单
在 HTML 表单中，需要指定 enctype="multipart/form-data" 来启用文件上传功能，例如：
<form enctype="multipart/form-data" action="/upload" method="post"> <input type="file" name="avatar" /> <button type="submit">Upload</button> </form>
使用 Multer 中间件处理上传请求
在 Express.js 中配置 Multer 中间件，可以使用如下代码：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ------ - -------- ----- ---------- --- ------------------- ------------------------ ----- ---- -- - -- -------- -------- ----- ---- - --------- ------------------ ------------------ ---
在上面的代码中，multer({ dest: 'uploads/' }) 表示设置文件上传的目录为 uploads/，当上传成功后，文件会被保存到这个目录中。upload.single('avatar') 表示只允许上传一个名为 avatar 的文件，并将上传的文件信息保存到 req.file 属性中。
文件上传示例
以下是一个完整的文件上传示例，包括 HTML 表单和 Express.js 中间件代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------
----- ----------------------------- ---------------- --------------
------ ----------- ------------- --
------- -----------------------------
-------
-------
--------- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ---------- --- ------------ ----- ---- -- - ---------------------- - --------------- --- ------------------- ------------------------ ----- ---- -- - ----- ---- - --------- ------------------ ------------------ --- ---------------- -- -- - ---------------------- ---
文件资源访问
在 Express.js 中，可以使用 express.static 中间件来处理文件资源访问。express.static 中间件是 Express 内置的唯一在请求处理开始前处理请求的中间件，它可以将静态文件如图像、CSS 和 JavaScript 文件等作为应用程序的一部分直接提供给客户端。
静态资源目录
为了告诉 Express.js 服务在哪个目录下存储静态资源，可以使用 express.static 中间件，例如：
app.use(express.static('public'));在上面的代码中，public 表示静态资源目录的名称，也就是服务启动后，这个目录下的静态资源可以通过 URL 直接访问，例如：
http://localhost:3000/images/logo.png
这个 URL 将会获取 public 目录下的 images/logo.png 文件。
路由中间件
也可以使用不同的路由中间件来为不同类型的静态资源指定不同的目录，例如：
app.use('/public/images', express.static('uploads/images'));
app.use('/public/css', express.static('uploads/css'));在上面的代码中，/public/images 和 /public/css 是不同的路由路径，它们分别指向 uploads/images 和 uploads/css 目录下的静态资源。
文件资源访问示例
以下是一个完整的文件资源访问示例，包括 HTML 和 Express.js 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------- ---- ---------------------- ---------- -- ------- -------
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------------------- ---------------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- ---------------- -- -- - ---------------------- ---
总结
通过本文介绍的方法，我们可以方便地实现文件上传和文件资源访问的功能。使用 Multer 中间件可以实现文件上传，使用 express.static 中间件可以实现文件资源访问。这些功能在 Web 应用程序开发中非常常用，掌握方法和技巧，对于提高开发效率和应用程序的稳定性都有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466d76f968c7c53b07439d6