前言
在前端开发中，经常会遇到上传和下载大文件的需求，这时候需要用到断点续传技术。resumablejs 就是一个非常实用的 npm 包，可以实现这个功能。本文将详细介绍 resumablejs 的使用方法，并提供示例代码。
安装
首先需要使用 npm 安装 resumablejs。
--- ------- ----------- ------
安装完成后，在需要使用的地方引入 resumablejs。
------ --------- ---- --------------
基本用法
使用 resumablejs，首先需要创建一个实例，并对实例进行配置。
----- --------- - --- ----------- ------- ---------- -- ----- --- ---------- - - ---- - ----- -- ---- -------------------- -- -- --------- ----------- ----- -- ---------- -------------------------- -- -- -------------- ---
其中，target 是上传文件的目标 URL；chunkSize 是切片大小，可以根据情况自行调整；simultaneousUploads 是同时上传的文件数量，可以根据带宽等因素自行调整；testChunks 表示是否开启测试切片功能，可以用来检查服务器是否已经上传过该切片；throttleProgressCallbacks 是进度条更新的时间间隔，单位是毫秒。
接下来是开始上传事件的监听。
------------------------- ------ -- - -------------------------- --------- ------------------- ---
这段代码监听了文件添加事件，当用户选择了需要上传的文件后，会执行回调函数。在回调函数里，调用了 resumable.upload() 方法，开始上传文件。
如果需要取消上传，可以调用 resumable.cancel() 方法。
-------------------
进度条
resumablejs 默认没有提供进度条功能，需要自己手动添加。这里提供一个简单的示例。
---- ------------------------- ---- ----------------------- ----- ------------------------------- ------
----------------- - --------- --------- ------ ------ ------- ----- ----------------- ----- - --------- - --------- --------- ---- -- ----- -- ------- ----- ------ --- ----------------- -------- ----------- ----- ---- ----- - -------------- - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -
------------------------ -- -- - ----- ----- - -------------------- ----- -------- - -------------------- - ------ ----- ---------- - ------------------- - ----- - ----- ----- -------- - ------------------------------------ -------------------- - ---------- - ---- ----- ------------ - ----------------------------------------- ---------------------- - ---------- - ---- ---
在上面的代码中，监听了上传进度事件，在回调函数里计算出当前已经上传的大小和总大小，然后计算出当前上传的进度百分比，最后设置进度条的宽度和显示百分比的文本。
断点续传
resumablejs 正是因为其断点续传功能而受到前端开发人员的青睐。当文件上传过程中出现意外中断的情况，resumablejs 可以自动记录已经上传的文件分块，下次继续上传时只需上传未上传的分块即可，从而避免了重新上传整个文件的过程。
总结
本文介绍了 resumablejs 的基本用法和一些实用的功能，包括进度条和断点续传。resumablejs 极大地方便了前端上传大文件的开发工作，如果你还没有尝试过，那么赶快下载安装并且开始实践吧！
示例代码：https://github.com/muyunyun/resumablejs-demo
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f0f0285403f2923b035c1f3