介绍
在前端开发中，文件上传是个常见的需求，有许多第三方上传组件可供使用。其中，npm 包 @jaypy.code/upload-sdk 是一个可以帮助我们完成文件上传的工具，它使用了现代的上传技术，支持多文件上传、断点续传、二进制流和 Form 表单两种上传方式。
安装
你可以使用 npm 包管理器，快速安装该包。
--- ------- ---------------------- ------
使用
初始化上传器
使用 upload-sdk 前，需要先进行初始化。初始化 upload-sdk 时，可以设置一些默认的配置信息，比如上传地址、分片大小等。示例代码如下：
------ - -------- - ---- ------------------------
----- ------- - -
---- --------------------------- -- ----
---------- ---- - ----- -- ----
--------------- -- -- -------
----------- -- -- ------
-------- - -- ---
------ -----------
-
-
----- -------- - --- -----------------单文件上传
单文件上传只需调用 upload 方法即可，参数为单个文件对象。上传过程中会触发不同阶段的事件回调函数，如开始、上传中、上传完成和上传失败等。示例代码如下：
----- ---- - ---------------------------------------------
--------------------- -
-------- ------ -- -
--------------- -----------------
--
----------- ------ -------- -- -
--------------- --------------------------
--
---------- ------ --------- -- -
--------------- -----------------
--
-------- ------ ------ -- -
--------------- -----------------
-
--多文件上传
文件多选后，可以使用 uploadFiles 方法上传所有文件。上传过程中也会触发不同阶段的事件回调函数。示例代码如下：
----- ----- - ------------------------------------------
--------------------------- -
-------- ------ -- -
--------------- -----------------
--
----------- ------ -------- -- -
--------------- --------------------------
--
---------- ------ --------- -- -
--------------- -----------------
--
-------- ------ ------ -- -
--------------- -----------------
-
--断点续传
上传大文件时，遇到网络异常或上传中途停止，文件上传会失败。为了避免因网络问题导致文件上传失败的情况，我们可以使用断点续传的功能。当上传大文件时，上传器会将文件分成多个分片，每个分片完成上传后，上传器会在本地记录上传进度。当上传中途停止时，重新启动上传器，它会检查本地上传进度，并从上一次上传的进度继续上传。示例代码如下：
----- ---- - ---------------------------------------------
----- -------------- - --- -----------------
--------------------------- -
------- ----- -- ------
-------- ------ -- -
--------------- -----------------
--
----------- ------ -------- -- -
--------------- --------------------------
--
---------- ------ --------- -- -
--------------- -----------------
--
-------- ------ ------ -- -
--------------- -----------------
-
--上传二进制流
如果我们需要上传二进制文件流，可以使用 uploadBlob 方法，该方法接受二进制流和文件名称两个参数。示例代码如下：
----- -------- - --- ------------ --------
----------------------------- ------------ -
-------- ------ -- -
--------------- -----------------
--
----------- ------ -------- -- -
--------------- --------------------------
--
---------- ------ --------- -- -
--------------- -----------------
--
-------- ------ ------ -- -
--------------- -----------------
-
--上传 Form 表单
我们也可以上传表单数据，只需将表单对象作为参数传入 uploadForm 方法中即可。上传过程中，上传器会自动将表单数据转换为二进制流进行上传。示例代码如下：
----- ---- - --- ----------
------------------- --------
------------------ ---
------------------------- -
-------- ------ -- -
--------------- -----------------
--
----------- ------ -------- -- -
--------------- --------------------------
--
---------- ------ --------- -- -
--------------- -----------------
--
-------- ------ ------ -- -
--------------- -----------------
-
--结语
本文介绍了 @jaypy.code/upload-sdk 的使用方法，读者可以自行在自己的项目中使用该包，来方便的完成文件上传功能。同时，在使用过程中可以根据自身需求，自定义配置信息来获得更好的使用效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c98