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