在前端的开发过程中，我们经常需要实现文件上传功能。而对于文件的上传，一般都需要使用 multipart/form-data 格式来传递数据。Express.js 是一款非常流行的 Node.js Web 框架，本文将详细介绍如何在 Express.js 中实现 multipart/form-data 格式的数据上传。
什么是 multipart/form-data 格式
首先，我们需要了解什么是 multipart/form-data 格式。在 Web 开发中，我们通常使用的是 URL 编码（application/x-www-form-urlencoded）或 JSON 格式（application/json）来传递数据。但是在文件上传时，这些格式就无法满足需求了。
multipart/form-data 是一种在 HTTP 协议上传送文件的标准方法。在使用 multipart/form-data 格式时，数据被分成多个部分，每个部分都有自己的 MIME 类型和 Content-Disposition。我们可以在 HTTP 请求头中设置 content-type 为 multipart/form-data，将多个部分的数据一起传递到服务器端。
在 Express.js 中实现 multipart/form-data 格式的数据上传
实现 multipart/form-data 格式的数据上传，我们需要借助一个 Node.js 模块——multer。multer 是一个 Node.js 中间件，用于处理表单数据以及文件上传。它支持以下三种数据类型的处理：
application/x-www-form-urlencoded：用于处理表单数据。multipart/form-data：用于处理文件上传。application/json：用于处理 JSON 格式的数据。
下面，我们就来详细介绍如何使用 multer 在 Express.js 中实现 multipart/form-data 格式的数据上传。
安装 multer
在使用 multer 之前，我们需要先将其安装到项目中。可以使用 npm 在命令行中执行以下命令进行安装：
npm install --save multer
引入 multer
在 Node.js 中，我们需要使用 require 来引入模块。引入 multer 模块的代码如下：
const multer = require('multer');设置文件上传的目录
multer 允许我们设置文件上传的目录。可以使用以下代码创建一个名为 uploads 的文件夹，作为文件上传的目录：
const upload = multer({ dest: 'uploads/' });创建上传路由
创建一个上传文件的路由，使用 upload.single 方法进行处理。upload.single 方法表示上传单个文件。代码如下：
app.post('/upload', upload.single('file'), (req, res) => {
res.send('File uploaded successfully!');
});在以上代码中，我们使用 app.post 定义了上传路由 /upload，使用 upload.single 处理文件上传，并在事件回调函数中返回一个成功的消息。
HTML 文件上传表单
最后，我们需要创建一个 HTML 文件上传表单，将文件上传到服务器。使用以下代码创建一个简单的 HTML 文件上传表单：
<form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit">Upload</button> </form>
在 HTML 表单中，我们使用 enctype="multipart/form-data" 属性指定了表单数据的传输方式为 multipart/form-data。<input type="file" name="file"> 表示我们要上传的文件。
完整代码示例
以下是一个完整的示例代码，包括创建上传路由、设置文件上传目录和 HTML 文件上传表单：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------
----- --- - ----------
----------
----- ------ - -------- ----- ---------- ---
--------
------------------- ---------------------- ----- ---- -- -
-------------- -------- ----------------
---
---- ---- ------
------------ ----- ---- -- -
----------
----- ---------------- ------------- ------------------------------
------ ----------- ------------
------- -----------------------------
-------
---
---
------
---------------- -- -- -
------------------- ------- -- ---- -------
---总结
本文详细介绍了在 Express.js 中实现 multipart/form-data 格式的数据上传。通过使用 multer 中间件，我们可以轻松地处理文件上传。希望通过本文的学习，您能够更好地理解文件上传的实现原理，同时也能够更加熟练地使用 multer 中间件，为您的项目带来更佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486a69748841e989452fadd