Express.js 是一个流行的 Node.js 框架，用于构建 Web 应用程序。它提供了许多常见的功能，如路由、中间件、模板引擎等等。在本文中，我们将探讨如何在 Express.js 中实现 HTTP 文件上传。
什么是 HTTP 文件上传？
HTTP 文件上传是一种通过 Web 应用程序向服务器上传文件的方式。这是通过使用 HTTP 协议的 POST 请求来完成的。在 POST 请求中，文件跟随表单数据一起发送。
Express.js 中的 HTTP 文件上传
Express.js 提供了一种简单的方式来处理 HTTP 文件上传。它提供了中间件 multer，该中间件可用于处理文件上传。multer 具有许多优点，其中最重要的是它支持文件上传的各种类型和选项。
安装 multer
首先，我们需要安装 multer。可以使用 npm 包管理器安装 multer。
$ npm install --save multer
配置 Express.js 应用程序
在我们开始使用 multer 中间件之前，我们需要做一些配置。使用以下代码创建 Express.js 应用程序。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- -- -- ------ --- ----- ------ - -------- ----- ---------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在上面的代码中，我们创建了一个 Express.js 应用程序，并使用 multer 中间件进行了配置。此中间件将所有上传的文件保存到 uploads/ 目录中。
处理文件上传
现在，我们已经准备好处理文件上传了。在这个例子中，我们将使用表单来上传文件。表单中必须包含一个 “file” 字段，用于指定要上传的文件。
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
---------------
----- ---------------- ------------- ------------------------------
------ ----------- ------------
------ --------------
-------
-------
-------上传表单中的 action 属性指示了要处理该表单的路由。在本例中，我们将要使用 /upload 路由处理上传文件。
接下来，在 Express.js 应用程序中声明路由，并使用 multer 的单个文件中间件处理上传的文件。
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.send('文件上传成功！');
});在上面的代码中，我们在 /upload 路由上使用了单个文件的 multer 中间件。在处理请求时，我们可以通过 req.file 属性访问上传的文件的信息。
配置多个上传文件
如果表单中包含多个文件，我们可以使用 multer 的 array() 或 fields() 方法配置上传的文件。
使用 array()
使用 array() 方法可以处理多个符合条件的文件。
app.post('/upload', upload.array('files'), (req, res) => {
console.log(req.files);
res.send('文件上传成功！');
});在上面的代码中，我们使用多个文件的 multer 中间件。在处理请求时，我们可以通过 req.files 属性访问上传的所有文件的信息。
使用 fields()
使用 fields() 方法可以处理多个具有不同名称的文件。
-- -------------------- ---- ------- ----- ------ - -------- ----- ---------- ----------- - ----- --------- --------- - -- - ----- ---------- --------- - -- --- ------------------- ------- ----- ---- -- - ----------------------- -------------------- ---
在上面的代码中，我们使用多个 fields 的 multer 中间件。定义了两个字段，第一个字段为 avatar，最多可上传一张图片; 第二个字段为 gallery，最多可上传 8 张图片。
使用 Multer 的其他选项
Multer 还提供了许多其他选项。以下是一些常用的选项。
限制文件大小
为了限制上传的文件大小，我们可以使用 limits 选项。
const upload = multer({
dest: 'uploads/',
limits: { fileSize: 1000000 }, // 限制文件大小为 1MB
});在上面的代码中，我们使用 limits 选项来限制文件大小。在这个例子中，文件大小被限制为 1MB。
限制文件类型
为了限制上传的文件类型，我们可以使用 fileFilter 选项。
-- -------------------- ---- -------
----- ------ - --------
----- -----------
----------- ----- ----- --- -- -
-- ----- --------- - ---- --
-- -
------------- --- ------------ --
------------- --- ----------- --
------------- --- -----------
- -
------ -------- ------
-
------ -------------------
--
---在上面的代码中，我们使用 fileFilter 选项来限制上传的文件类型。在本例中，只允许上传 .jpg、.png 和 .gif 文件。
完整的示例代码
假设您的项目已经安装了 Express.js 和 Multer。下面是一个完整的示例代码，展示如何在 Express.js 中使用 HTTP 文件上传。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------
----- ---- - ----------------
----- --- - ----------
-- -- ------ ---
----- ------ - --------
----- -----------
------- - --------- ------- -- -- ------- ---
----------- ----- ----- --- -- -
-- ----- --------- - ---- --
----- --------- - -------------------
----- ------- - --------------------------------------------------------------
----- -------- - ------------------------------
-- --------- -- -------- -
------ -------- ------
-
------ -------------------
--
------------------
------------ ----- ---- -- -
---------------------- - ---------------
---
------------------- ----- ---- -- -
----------- ---- ----- -- -
-- ----- -
-------------------------
----------------------------------
- ---- -
----------------------
--------------------
-
---
---
---------------- -- -- -
------------------- ------- -- ---- -------
---结论
在本文中，我们学习了如何在 Express.js 中使用 HTTP 文件上传。我们使用 multer 中间件来处理文件上传，并探讨了如何在 Express.js 应用程序中配置和使用 multer 中间件。 Multer 还提供了许多其他选项，例如限制文件大小、限制文件类型等等。通过使用 multer，我们可以轻松地实现 Web 应用程序中的文件上传功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752b4e28bd460d3ad97918e