在前端开发中，文件上传功能是一个很常见的需求，但是常规的文件上传方式并不能实现实时的上传进度展示。而使用 SSE 技术可以实现实时展示上传进度，本文将介绍如何使用 SSE 技术实现文件上传实时进度展示。
什么是 SSE？
SSE（Server-Sent Events），即服务端推送技术，是一种浏览器与服务器之间的单向通信方式。利用 SSE，服务器可以向浏览器推送数据，而不需要浏览器发出请求。SSE 可以用于实现服务端向浏览器推送实时通知、实时数据等功能。
实现思路
实现文件上传实时进度展示，需要从两个方面入手：文件上传和上传进度显示。文件上传可以通过 AJAX 实现，而上传进度显示则需要使用 SSE 技术。
具体实现思路如下：
- 创建一个 SSE 连接，用于接收上传进度信息；
- 通过 AJAX 实现文件上传，并通过回调函数实现实时上传进度的更新；
- 上传进度更新时，将进度信息通过 SSE 推送给浏览器；
- 浏览器接收到 SSE 推送的上传进度信息后，更新页面中的进度条。
示例代码
HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------------
------- ------------------------------------------------------------
-------
------
------- ---------------
----- -----------------
------ ----------- --------------- ------------
------- -----------------------------
-------
---- -----------------------------------
------- -----------------------------
-------
-------JavaScript 代码（sse-upload.js）：
-- -------------------- ---- -------
---------------------------- -
-- -- --- --
--- ----------- - --- -------------------------
-- --------
--------------------------------------- ----------- -
--- -------- - ----------------------------
----------------------------
-- -------
-- -----
-------- --------------------------- -
---------------- - ------------------ -------- - -----
-
-- ----
--------------------------------- -
--- -------- - --- -----------
--- --------- - -----------------------------
----------------------- -----------
-- ---- ----
--------
---- ----------
----- -------
----- ---------
------ ------
------------ ------
------------ ------
---- -------- -- -
--- --- - ---------------------
-- ------------ -
-- ------
--------------------------------------- -------- --- -
-- -------------------- -
--- -------- - --------- - ------- - ----------------
--------------------------------- --------- -------- ----
-
-- -------
-
------ ----
-
---
---
---服务器代码（Node.js）：
-- -------------------- ---- -------
--- ---- - ----------------
--- -- - --------------
--- ---- - ----------------
-- -- ---- ---
--- ------ - ------------------------------- ---- -
-- ------
-- ----------- --- ------ -- ------- --- ---------- -
--- ---- - ---------------
--- -------- - -------------------- ---------- -----------
-- -------
------------------------------------------
-- ----
------------------ ---------------- ---------------
------------- -----------
-
---
-- -- --- --
--- ---------- - ---
--- --------- - ------------------------------- ---- -
-- -----
-- ------ ----- ------------ - ---------- --------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- --------------
---------------------
-- ---------------------
--------------- ---------- -
------------------------------------------ ---
---
---
-- -- --- -----
---------------------- ---------- -
---------------- ------ -- ------- -- ---- -------
---
-- -- ---- -----
------------------- ---------- -
----------------- ------ -- ------- -- ---- -------
---
-- -------------
-------- -------------------------- -
--- ----- - -----------
--- ---- - ---------------- --------- -------- ---
--- ---- - - -- - - ------------------ ---- -
--------------------------- - - ----- - ---- - ------ - - ---- - --------
-
-总结
本文介绍了如何使用 SSE 技术实现文件上传实时进度展示。SSE 技术可以帮助我们实现实时通知、实时数据等功能，极大地扩展了前端应用的功能和应用场景。希望本文能为读者带来帮助，推动 SSE 技术的普及与应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a4a20badd4f0e0ffcf19ae