在现代 Web 应用程序中，文件上传是一个非常常见的需求。在前端应用程序中，我们使用 File API 来处理文件上传。在 Next.js 应用程序中，我们可以使用许多库来处理文件上传，例如：Multer、Formidable、Busboy 等等。
在本文中，我们将深入了解 Next.js 中文件上传的实现方式及示例代码。
使用 Multer 上传文件
Multer 是一个非常受欢迎的 Node.js 文件上传中间件。它能够处理非常多的文件上传情况并且还有很好的文档支持。
在 Next.js 中，我们可以像这样使用 Multer：
Step 1: 安装 Multer
npm install multer
Step 2: 在 Next.js API 路由中使用 Multer
-- -------------------- ---- -------
------ ------ ---- ---------
----- ------- - --------------------
------------ --------------------
--------- -------- ----- ----- --- -
-------- -------------- - --- - ---------- - ---------------------------------
-
---
----- ------ - --------
-------- --------
------- - --------- ------- -- -- ---
--------------------
------ ------- -------- ------------ ---- -
----------- ---- -------- ----- -
-- ----- -
-----------------
---------------------- -------- -------- ---
- ---- -
----------------------
---------------------- -------- -------- ---
-
---
-Multer 的 diskStorage 方法可以设置文件存储路径和文件名。upload 方法是 Multer 的主要方法，它将上传的文件单独存储，以便在处理请求时进行后续处理。
这里的 .single('myFile') 方法确保只上传一个文件，文件字段名为 myFile。
使用 Formidable 上传文件
Formidable 是一个非常流行的 Node.js 表单解析器，可以解析多种类型的表单数据，包括文件上传。
在 Next.js 中，我们可以像这样使用 Formidable：
Step 1: 安装 Formidable
npm install formidable
Step 2: 在 Next.js API 路由中使用 Formidable
-- -------------------- ---- -------
------ ---------- ---- -------------
------ ------- -------- ------------ ---- -
----- ---- - --- --------------------------
-------------- - --------------------
------------------- - -----
--------------- -------- ----- ------- ------ -
-- ----- -
-----------------
---------------------- -------- -------- ---
- ---- -
-------------------
---------------------- -------- -------- ---
-
---
-Formidable 的 IncomingForm 方法可以设置文件存储路径，keepExtensions 方法确保文件保持原始扩展名。parse 方法是 Formidable 的主要方法，它解析包含文件的表单，并将所有表单数据存储在 fields 和 files 变量中。
使用 Busboy 上传文件
Busboy 是另一个非常流行的 Node.js 文件上传中间件。Busboy 与 Multer 不同之处在于它更注重高性能的上传。
在 Next.js 中，我们可以像这样使用 Busboy：
Step 1: 安装 Busboy
npm install busboy
Step 2: 在 Next.js API 路由中使用 Busboy
-- -------------------- ---- -------
------ ------ ---- ---------
------ - ----------------- - ---- -----
------ ---- ---- -------
------ ----- ------ - -
---- -
----------- ------
--
-
------ ------- -------- ------------ ---- -
----- ------ - --- -------- -------- ----------- ---
----------------- -------- ----------- ----- --------- --------- --------- -
----- ------ - --------------------- --------- - --- - ----------
-------------------------------------
---
------------------- -------- -- -
------------------- -----------
---------------------- -------- -------- ---
---
-----------------
-Busboy 具有丰富的配置选项。在这个示例中，我们使用了 api 属性中的 bodyParser 属性来设置请求体解析。在 file 事件中，我们使用 Node.js createWriteStream 方法来将上传的文件写入磁盘。
总结
我们已经深入了解了 Next.js 中文件上传的实现方式。我们使用了 Multer、Formidable 和 Busboy 这三个中间件库来实现文件上传。虽然这些库的实现方式略有不同，但是方法的目的都是相同的。我们希望这些实例对你有所帮助，帮助你完成你的下一个文件上传任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2039348841e9894e59a8d