如果你正在开发一个需要文件上传功能的 web 应用程序，那么你可能会遇到一个非常棘手的问题：如何显示上传进度条以及如何在上传过程中处理它？
在本文中，我们将介绍如何使用 Fastify（一个高效、低开销的 Node.js Web 服务器框架）和其插件来实现文件上传进度条功能。我们将从入门介绍开始，并提供代码示例和深入学习的指导意义。
基础准备
在开始之前，请确保你已经安装了 Node.js 和 Fastify，并创建了一个新的 Fastify 应用程序。如果你还没有这样做，请先参阅 Fastify 文档。
我们还需要安装以下几个 Node.js 模块：
- fastify-multipart：Fastify 插件，用于处理
multipart/form-data类型的请求，包括文件上传。 - pino：一种快速、低开销的 Node.js 日志库，可以轻松地集成到 Fastify 应用程序中，以帮助我们调试和排除问题。
你可以使用以下命令将它们一起安装：
--- ------- ----------------- ---- ------
安装完成后，在你的 Fastify 应用程序中引入它们：
----- ------- - -------------------- ------- ----------------- -- ----- --------- - ----------------------------
基本语法和文件上传示例
在 Fastify 应用程序中处理文件上传非常简单。只需要添加 multipart: true 选项，并使用 register 方法将 fastify-multipart 插件注册到应用程序中即可，示例如下：
--------------------------- -
------- -
--------- ---- - ---- - -- -- ------------ --
--
-- ------ ---
--
----------------------- ----- -------- ----- ------ -
----- ---- - ----- ----------
-- ------ ---
------ - --- ---- -
--如上所示，我们只需在路由处理程序中调用 req.file()，Fastify 将返回一个包含上传文件的对象（文件名、文件大小等）。
显示上传进度条
在上述示例中，我们已经成功上传了文件，但是它不包括进度条功能。如果我们要增加进度条，就需要使用 WebSocket 或长轮询和前端 JavaScript 等技术。
在本文中，我们将使用 Socket.IO（一个用于实时、双向通信的库）来实现上传进度条。我们将以两种方式向前端发送上传进度信息：
- 在文件上传过程中持续发送进度信息。这将需要 Socket.IO 的流模式。
- 在文件上传过程结束时发送一个最终事件，通知前端上传已完成。这将需要 Socket.IO 的普通事件模式。
首先，我们需要在 Fastify 应用程序中启用 WebSocket 功能。我们可以使用 fastify-websocket 插件简化这个过程：
--- ------- ----------------- ------
引入插件并在 Fastify 实例上注册它：
----- ------- - -------------------- ------- ----------------- -- ----- --------- - ---------------------------- ----- --------- - ---------------------------- --------------------------- - -- ---- --- -- ---------------------------
现在我们已经启用了 WebSocket 功能。接下来，我们需要根据文件上传过程的状态向前端发送进度信息。
要做到这一点，我们可以引入以下代码：
----------------------- - ---------- ---- -- ----- -------- ------------ ---- -
--- ------------- - - -- -------
--- -------- - ---- -- ----
--- -- - ----------------- -- --------- --
---------------------- ------
-------- ------- ------- ----- --------- --------- --------- -
-------- - -------------- -- -------------- -- ------
--------------- ------- -- -
------------- -- ------------ -- --------
------------------------ --------- ------------- - -------- --- -- ------
--
-- ----------------
-------------- -- -- -
------------------------ ---- ---- ---
--
-- -----------------------
---------------- ----- -- -
------------------------ ------ ----------- ---
--
-- ----------
------------- -- -- -
-------------------- -- -- --------- --
-- ------- ---
--
-
-------- ----- ----- -
-------------------- -- -- --------- --
----- ---
-
--在上面的示例代码中，我们首先设置一些变量来跟踪文件上传的状态（已上传的字节数和文件的总大小）。接下来，我们将切换到 multipart 请求解析模式，并设置两个回调函数：handler 和 error。
在 handler 回调函数中，我们可以获取到上传的文件，并使用它的 on('data') 事件来计算上传进度并持续地向前端发送进度信息。此外，我们还要对文件上传过程中可能出现的错误处理和结束事件进行处理。
最后，在文件上传结束时，我们将使用 connection.destroy() 方法关闭 WebSocket 连接，否则它将保持打开状态并继续发送数据。
前端界面
最后，在前端界面中，我们使用 Socket.IO 的客户端库并订阅上传进度事件。以下示例是一个简单的前端界面，它将显示一个 Bootstrap 进度条，其中包括文件上传进度：
--------- -----
----- ----------
------
----- ----------------
-------------- ---- ------ -------- -----------
----- ---------------- -----------------------------------------------------------------------------
-------
------
---- ---------------- ------
----------- ---- ------ -------- --------
---- --------------- ------
---- -------------------- -------------------------
------
------
------- ---------------------------------------
--------
----- ------ - ----
--------------------- ------ -- -
----- ----------- - ---------------------------------------
-- --------------- -
----- ------- - ------------------------ - ----
----------------------- - -------------
----------------------------------------- --------
--------------------- - ------------ ---------
-
-- ---------- -
---------------------------------------
--------------------- - --------- -------------
-
-- ------------ -
-----------------
-
--
---------
-------
-------在上述代码中，我们简单地将 Socket.IO 客户端脚本导入到我们的 HTML 页面中，并使用 io() 方法连接到 Fastify 应用程序的 WebSocket 服务器。接下来，我们注册了 progress 事件处理程序，并使用 Bootstrap CSS 样式表和 JavaScript 代码设置进度条的状态和效果。
结论
在本文中，我们已经介绍了如何在 Fastify 应用程序中使用 WebSocket 和 Socket.IO 插件来实现文件上传进度条功能。我们提供了深入的技术示例和指导意义，包括前端代码示例、完整的 Fastify 应用程序示例和许多实用技巧和建议。
要了解更多有关 Fastify 和 WebSocket 的详细信息，请参阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6709878cd91dce0dc879ae27