介绍
@modern-uploader/core 是一个基于 Web Workers 的现代化上传库。它通过将上传逻辑从主线程中分离出来，使得上传操作可以在后台运行，提高了上传效率，同时也减少了上传操作对前端 UI 渲染和用户交互的影响。
本文将详细讲解如何使用该 npm 包，包括库的安装、使用以及参数说明等。
安装
可以通过 npm 进行安装：
--- ------- ---------------------
使用
首先在代码中导入核心类 Uploader，并调用其构造函数创建 Uploader 对象。构造函数需要传入一个 url 字符串，该字符串指定了服务器端用于处理上传请求的接口。
------ - -------- - ---- ------------------------ ----- -------- - --- --------------------
接下来，我们可以通过调用 Uploader 实例的 add 方法来添加文件：
-------------------
其中 file 是一个 File 对象，表示要上传的文件。
Uploader 实例会返回一个 Promise，它将在上传完成后 resolve，或在上传过程中发生错误时 reject。我们可以用 async/await 调用 add 方法，以便捕获 Promise 的 resolve 或 reject 状态：
--- - ----- ------------------- --------------------- - ----- ------- - ---------------------- ------- -
参数说明
下面介绍一些常用的 Uploader 对象方法以及参数：
设置配置
Uploader 构造函数可以传入一个 options 对象，用于设置 Uploader 实例的配置。常用的配置项包括：
chunkSize：指定每个文件分片的大小，默认为 5MB。concurrency：指定上传任务的并发数，默认为 3。retry：指定上传失败时的最大重试次数，默认为 3。timeout：指定上传超时时间，默认为 0。设置为非 0 值时，上传操作超时后将中止上传并抛出 timeout 错误。
----- -------- - --- ------------------- - ---------- -- - ---- - ----- ------------ -- ------ -- -------- -- - ---- ---
添加文件
Uploader 实例的 add 方法用于添加文件。该方法接受一个 File 对象作为参数。当文件添加成功后，该方法将返回一个 Promise，该 Promise 将在上传成功后 resolve，或在上传过程中出现错误时 reject。
--- - ----- ------------------- --------------------- - ----- ------- - ---------------------- ------- -
移除文件
Uploader 实例的 remove 方法可以用于移除文件。该方法接受一个 File 对象作为参数。如果要移除多个文件，可以多次调用该方法。
----------------------
显示上传进度
Uploader 实例可以监听 progress 事件，以更新上传进度。该事件将在上传每个分片时触发，Event 对象中包含 loaded 和 total 两个属性，分别表示已上传的字节数和总字节数。我们可以将这些信息用于显示上传进度条等界面元素。
----------------------- ----- -- - ----- ------- - ----------------------- - ----------- - ---- - ---- -------------------- --------- ---
取消上传
我们可以使用 Uploader 实例的 cancel 方法取消正在进行的上传操作。该方法不接受参数。
------------------
事件
Uploader 实例支持一些事件，用于监听上传过程的状态变化。这些事件包括：
start：上传开始时触发。chunk:start：上传每个分片时触发。chunk:success：上传每个分片成功时触发。retry：上传失败后重试前触发。retry:success：上传失败后重试成功时触发。success：上传成功时触发。error：上传过程中发生错误时触发，该事件的 Event 对象包含一个error属性，表示具体的错误信息。cancel：上传被取消时触发。
以上事件都可以通过 Uploader 实例的 on 方法注册回调函数。回调函数的参数为 Event 对象。例如：
-------------------- -- -- - --------------------- ---------------- -- -- - --------------------- -------------- ----- -- - ---------------------- ------------- ---
示例代码
下面是一个完整的示例代码：
------ - -------- - ---- ------------------------
----- --------- - --------------------------------------
----- ------------ - -------------------------------------
----- ------------ - ------------------------------------
----- -------- - --- ------------------- -
---------- -- - ---- - -----
------------ --
------ --
-------- -- - ----
---
------------------------------------ ----- -- -- -
----- - ----- - - ----------
--- ---- ---- -- ------ -
--- -
----- -------------------
---------------------
- ----- ------- -
---------------------- -------
-
-
---
----------------------------------------- ----- -- -
-----------------------
------------------------------------
---
------------------------------------------ ----- -- -
-----------------------
---------------------------------------
---
------------------------------------- ----- ----- -- -
-----------------------
---------------------------------------
----- - ----- - - -------------------
--- ---- ---- -- ------ -
--- -
----- -------------------
---------------------
- ----- ------- -
---------------------- -------
-
-
---
-------------------- -- -- -
---------------------
-------------------- -- -- -
------------------------
---------------------- -- -- -
-----------------------
----------------- ----- -- -
----- ------- - ----------------------- - ----------- - ---- - ----
-------------------- ---------
---------------------- - --------
---------------- -- -- -
---------------------
---------------------- - --------
-------------- ----- -- -
---------------------- -------------
---在本示例中，我们创建了一个 Uploader 实例并监听了一些事件。在 HTML 中，我们提供了两种上传文件的方法：文件选择框和 drag-and-drop。每当用户选择或拖拽一个或多个文件，我们就调用 Uploader 实例的 add 方法开始上传。同时，我们还实现了一个上传进度条，用于显示上传进度。示例代码可以在浏览器中直接运行。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bcc967216659e244795