在现代网页开发环境下，文件上传功能是必不可少的。但是，在文件上传时用户需要等待上传完成，这样会让用户感到不方便。开发者可以通过实现进度提示功能，让用户知道上传的进度。本文将介绍如何使用 Server-Sent Event（SSE）实现文件上传进度提示的方法。
SSE 简介
Server-Sent Event 是 HTML5 中引入的一种技术，允许服务器向网页发送事件。这种技术允许开发者使用简单的api创建长时间保持的服务器到客户端链接。
SSE 与 ajax 和 WebSocket 不同，它不需要额外的握手过程，而是基于 HTTP，因此兼容性较好。
使用 SSE 实现文件上传进度提示
本文首先介绍如何使用 SSE 实现文件上传进度提示。
在前端 HTML 中引入 SSE.js 库，该库是一个允许您使用 Server-Sent Events 的 JavaScript 库。
<script src="/path/to/ssejs"></script>
实现一个 SSE 服务器，用于实现 SSE 与浏览器之间的通信。
-- -------------------- ---- ------- ----- --- - -------------------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ------------------------ ---------------------------- --------- ----- ---- ------------ ----------------------------------- ------------ ------------------ ----- ---- -- - ---------------------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ---------------- ------- ------ ---------- -------------- --------- ------------- --------- --------------------- ---- ------------------ ------- ------------------------------ -------- ----- --- - --- ----------------- ------------------ -------- ------- - ----- ---- - ----------------------- ----------------------------------------- - -------------- ------------------------------------------- - ------------ --- ------------ --------- ------- ------- --- --- -------------------- ----- ---- -- - --------------- ----- -------- - -------------------------- ---- -- ---- -------- ----- -- -------- ------------- --------- --------- ------- -------------- --- -- --------- --- ---- - ------------- - --- ----- ---- - ---------------- -- ----- ---------------- -- -- ------------------- ------- -- ---- -----------
这个 SSE 服务器运行后，可以在 /upload 路由中访问。
在 SSE 服务器中您需要实现一个 /progress 路由，该路由将在上传过程中向前端发送数据。现在可以设置您想要的进度，并在进度达到 100% 后关闭 SSE 连接。
在 /upload 路由中，我们创建了一个 progress 元素来表示上传进度，并使用 SSE 库创建了一个 SSE 对象。我们也为 SSE 实例设置了 progress 事件监听器，当事件发生时，我们将事件数据解析为 JSON，并更新进度条和状态。
实现文件上传服务器
您需要实现一个使用
multipart/form-data来上传文件的文件上传服务器。这可以通过使用 Node.js 中的 Multer 来完成。const multer = require('multer'); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('image'), (req, res) => { res.status(200).send('file uploaded successfully'); });
综合来看，您需要在前端 HTML 中将上传文件的表单提交给上传处理程序。在上传数据时，您必须将数据发送到您的 SSE 服务器，前端页面需要 SSE 向服务器浏览器之间建立一个长期的连接来实现这个目的。SSE 服务器将实时向前端发送上传进度数据。
示例代码
以下是示例代码，以帮助您更好地了解如何使用 SSE 实现文件上传进度提示的方法。
SSE 服务器
-- -------------------- ---- -------
----- --- - --------------------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
------------------------
---------------------------- --------- ----- ----
------------ ----------------------------------- ------------
------------------ ----- ---- -- -
----------------------
--------- -----
----- ----------
------
----- ----------------
------------- ----------------
-------
------
---------- --------------
--------- ------------- --------- ---------------------
---- ------------------
------- ------------------------------
--------
----- --- - --- -----------------
------------------ -------- ------- -
----- ---- - -----------------------
----------------------------------------- - --------------
------------------------------------------- - ------------
---
------------
---------
-------
-------
---
---
-------------------- ----- ---- -- -
---------------
----- -------- - -------------------------- ----
-- ---- -------- ----- -- --------
-------------
--------- ---------
------- --------------
---
-- --------- --- ---- -
-------------
-
---
----- ---- - ---------------- -- -----
---------------- -- -- ------------------- ------- -- ---- -----------文件上传服务器
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('image'), (req, res) => {
res.status(200).send('file uploaded successfully');
});前端 HTML
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------ ----------------
------- -------------------------------
--------
-- ------ - --- --- ------
----- --- - --- -----------------
-- ----- --- ----- --------
------------------ -------- ------ -
----------------------------------------- - --------------
------------------------------------------- - ------------
---
-- ----- --- ----------
------------
---------
-------
------
----- ---------------- ------------- ------------------------------
-------- ------ -------------
------ ----------- -----------------
------ ------------- ---------------
-------
----
--------- ------------- --------- ---------------------
---- ------------------
-------
-------结论
在本文中，我们介绍了如何使用 Server-Sent Event 实现文件上传进度提示的方法。SSE 提供了一种简单的方法来更新进度，这种方法与 ajax 和 WebSocket 不同，但他们有自己的优缺点。本文仅仅是提供一个可以使用 SSE 实现文件上传进度提示的方法，该方法仅仅是其中的一个示例，您可以根据自己的需求进行适当的修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772a6406d66e0f9aadbd5e4