介绍
在 Web 应用程序开发中，文件上传功能是必不可少的。它使用户能够将文件从本地计算机上传到 Web 服务器。在前端开发中，有很多方法可以实现文件上传功能，其中最流行的方法是使用 Express.js 和 Multer 中间件。
Express.js 是一个基于 Node.js 的 Web 开发框架，可以用于构建高性能的 Web 应用程序。Multer 是一个 Node.js 中间件，用于处理文件上传。它可以在 Express.js 应用程序中处理来自 HTML 表单的 multipart/form-data 数据，并将文件上传到服务器。
在本文中，将详细介绍如何使用 Express.js 和 Multer 中间件实现文件上传功能，并提供示例代码供参考。
实现步骤
1. 安装 Express.js 和 Multer 中间件
在开始之前，需要先安装 Express.js 和 Multer 中间件。可以在命令行中使用以下命令安装它们：
--- ------- ------- --- ------- ------
2. 创建 Express.js 应用程序
在开始编写代码之前，需要先创建一个 Express.js 应用程序。在命令行中输入以下命令：
----- ----------- -- ----------- --- ----
在 npm init 命令执行后，可以根据提示创建一个 package.json 文件。在 package.json 文件中添加以下依赖项：
--------------- - ---------- ---------- --------- -------- -
然后，在根目录下创建一个名为 server.js 的文件，并在其中添加以下代码：
----- ------- - ------------------- ----- --- - ---------- ---------------- -- -- - ------------------- --------- -- ---- ------- ---
这里创建了一个 Express.js 应用程序，并在端口号为 3000 的情况下监听请求。
3. 创建 HTML 表单
在 HTML 表单中，使用 enctype="multipart/form-data" 属性将表单数据编码为多部分数据以上传文件。创建一个名为 index.html 的文件，并添加以下代码：
--------- -----
------
------
----- ----------------
----------- ------ ---------------
-------
------
-------- ------ ------------
----- ---------------- ------------- ------------------------------
------ ----------- ------------------
------ ------------- ---------------
-------
-------
-------这里创建了一个简单的 HTML 表单，它包含一个文件上传输入框和一个提交按钮。该表单将数据提交到 /upload 路由。
4. 创建 Express.js 路由
在 Express.js 应用程序中，使用 Multer 中间件处理文件上传。创建一个名为 routes.js 的文件，并添加以下代码：
----- ------- - ------------------- ----- ------ - ------------------ ----- ------ - -------- ----- ---------- --- ----- ------ - ----------------- ---------------------- ---------------------------- ----- ---- -- - -------------- ------------ --- -------------- - -------
这里创建了一个名为 /upload 的路由，它使用 Multer 中间件从表单中提取出单个名为 fileUpload 的文件。上传的文件将保存在 uploads/ 目录下。
5. 将路由与应用程序关联
在 server.js 文件中，将路由与应用程序关联起来。添加以下代码：
----- ------ - -------------------- ------------ --------
这里将所有路由都映射到 / 路径。
6. 运行应用程序
最后，在命令行中输入以下命令以运行应用程序：
---- ---------
然后，在 Web 浏览器中访问 http://localhost:3000/，上传一个文件并查看文件是否成功上传。
结论
本文详细介绍了如何在 Express.js 应用程序中使用 Multer 中间件实现文件上传功能，并提供了示例代码供参考。使用这种方法，可以轻松地将文件上传功能添加到自己的前端应用程序中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66fa5fc144713626014bd6fd