随着前端应用的不断发展，文件上传在很多场景中都扮演着非常重要的角色。而 Express.js 作为一种流行的服务器端框架，也提供了很多便捷的 API 来处理文件上传。本文将介绍如何在 Express.js 中实现文件上传，并提供最佳实践和注意事项。
使用 Multer 处理文件上传
Express.js 默认并不支持文件上传，但可以借助 Multer 中间件来实现。Multer 是一个针对 Express.js 框架的文件上传中间件，可以很方便地处理上传的文件并存储在指定位置。
安装 Multer
使用 NPM 安装 Multer：
npm install multer --save
配置 Multer 中间件
Multer 中间件的配置非常简单，只需调用 multer() 函数即可。该函数接收一个对象作为参数，可以使用以下选项：
dest：文件上传后保存的目录。fileFilter：用于过滤上传的文件。limits：用于限制上传文件的大小和数量。
下面是一个基本的 Multer 配置示例：
-- -------------------- ---- -------
----- ------ - ------------------
-- -- ------ ---
----- ------- - --------------------
------------ -------- ----- ----- --- -
-------- ------------
--
--------- -------- ----- ----- --- -
-------- -------------------
--
---
----- ------ - -------- -------- ------- ---在上面的示例中，我们创建了一个名为 upload 的 Multer 中间件，并设置了上传文件的保存目录为 uploads/，并将上传的文件名设置为原始文件名。
处理文件上传请求
有了 Multer 中间件之后，我们就可以方便地处理文件上传请求了。为了处理上传请求，我们只需在路由中使用 upload.single(fieldname) 或 upload.array(fieldname[, maxCount]) 中间件即可。
upload.single(fieldname)：用于处理单个文件的上传请求。upload.array(fieldname[, maxCount])：用于处理多个文件的上传请求，其中maxCount表示最多允许上传的文件数量。
下面是处理单个文件上传请求的示例代码：
// 处理单个文件上传请求
app.post("/uploadFile", upload.single("file"), function (req, res, next) {
// req.file 是上传的文件信息
res.send("文件上传成功！");
});上面的示例中，我们在 /uploadFile 路由中使用了 upload.single("file") 中间件来处理单个文件的上传请求。在中间件处理完毕后，我们可以使用 req.file 属性来访问上传的文件信息，比如文件名、大小等。
如果要处理多个文件上传请求，请使用 upload.array(fieldname[, maxCount]) 中间件。注意，使用 upload.array 中间件时，上传的文件信息会保存在 req.files 数组中。
最佳实践和注意事项
在使用 Multer 处理文件上传时，我们还需要注意一些最佳实践和注意事项，以确保上传过程的安全和有效性：
1. 配置上传文件大小限制
如果你不限制文件上传大小，可能会导致恶意用户上传大型文件，导致服务器崩溃。Multer 提供了 limits 选项，可以限制上传文件的大小和数量，我们可以根据需求进行配置。
下面是一个 Multer 配置大小限制的示例：
const upload = multer({
storage: storage,
limits: { fileSize: 1024 * 1024 * 10 }, // 限制上传文件大小为 10 MB
});2. 安全地处理文件上传
文件上传是一个很危险的操作，因为上传的文件可能包含恶意脚本，导致服务器受到攻击。为了确保上传过程的安全性，我们需要对上传的文件进行安全检查，包括文件类型、大小、和命名规则等方面的检查。
Multer 提供了 fileFilter 选项，可以过滤上传的文件，我们可以自定义一个过滤函数进行文件安全检查。
下面是一个简单的 Multer 文件过滤函数示例：
-- -------------------- ---- -------
----- ------ - --------
-------- --------
----------- -------- ----- ----- --- -
-- -------
----- ------------ - -------------- ------------ -------------
-- ------------
-- -------------------------------------- -
-------- ------
- ---- -
------ ---------------------
-
--
---在这个示例中，我们只允许上传 JPEG、PNG、GIF 格式的图片，其他格式的文件均会被过滤掉。
3. 配置上传文件的保存路径
为了保证上传文件的整洁和方便管理，我们应该将上传的文件保存到指定的目录中。在 Multer 中间件配置对象中，我们可以设置 destination 属性来指定保存目录。
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "uploads/"); // 保存目录（相对于当前项目目录）
},
filename: function (req, file, cb) {
cb(null, file.originalname);
},
});为了更好地管理上传的文件，我们应该使用分离的目录保存不同类型的文件，比如图片、视频、文档等，以便于后期的扩展和维护。
结论
在本文中，我们介绍了如何在 Express.js 中使用 Multer 中间件来实现文件上传，并提供了一些最佳实践和注意事项。上传文件是一个非常常见的场景，希望本文能够帮助大家更好地掌握文件上传的技巧和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670e06da5f551281025f6a26