在 Web 开发中，图像上传是一个常见的需求。在 Express.js 中，我们可以使用 multer 中间件来处理图像上传。本文将介绍如何使用 multer 处理图像上传，并解决常见的问题，包括限制上传文件大小、限制上传文件类型、自定义上传文件名等。
安装 Multer
在使用 Multer 之前，我们需要先安装它。可以使用 npm 命令来安装 Multer：
npm install multer
处理图像上传
在 Express.js 中，我们可以使用 Multer 中间件来处理图像上传。下面是一个处理图像上传的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------
----- --- - ----------
----- ------- - --------------------
------------ ----- ----- --- -- -
-------- ------------
--
--------- ----- ----- --- -- -
-------- -------------------
-
---
----- ------ - -------- -------- ------- ---
------------------- ----------------------- ----- ---- -- -
--------------- ------------
---
---------------- -- -- -
------------------- --------- -- ---- -------
---在上面的代码中，我们首先创建了一个 Multer 实例，并配置了文件存储的目录和文件名。然后，我们使用 upload.single('image') 方法来处理单个文件上传。最后，当文件上传成功后，我们向客户端发送一个成功消息。
限制上传文件大小
在处理图像上传时，我们通常需要限制上传文件的大小。我们可以通过配置 Multer 的 limits 选项来实现这一点。下面是一个限制上传文件大小的示例代码：
const upload = multer({
storage: storage,
limits: { fileSize: 1024 * 1024 }
});在上面的代码中，我们将上传文件大小限制为 1MB。
限制上传文件类型
除了限制上传文件大小，我们还可以限制上传文件的类型。我们可以通过配置 Multer 的 fileFilter 选项来实现这一点。下面是一个限制上传文件类型的示例代码：
-- -------------------- ---- -------
----- ------ - --------
-------- --------
----------- ----- ----- --- -- -
-- ------------------------------------ -
-------- ------
- ---- -
------ ----------- ------ --- ------------
-
-
---在上面的代码中，我们只允许上传图片类型的文件。如果上传的文件类型不是图片，将会返回一个错误消息。
自定义上传文件名
在默认情况下，Multer 会将上传的文件保存为其原始文件名。如果我们希望自定义上传文件名，可以通过 filename 函数来实现。下面是一个自定义上传文件名的示例代码：
-- -------------------- ---- -------
----- ------- - --------------------
------------ ----- ----- --- -- -
-------- ------------
--
--------- ----- ----- --- -- -
----- --- - -----------------------------------
----- -------- - -----------------------
-------- ----------
-
---
----- ------ - -------- -------- ------- ---在上面的代码中，我们使用当前时间戳作为文件名，并将文件保存到 uploads/ 目录下。
结论
在本文中，我们介绍了如何在 Express.js 中处理图像上传，并解决了一些常见的问题，包括限制上传文件大小、限制上传文件类型、自定义上传文件名等。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67663d9176af2b9a20f4a99c