大文件支持断点与分片 resumable.js

Power!!

已于 2023-11-21 20:42:30 修改

阅读量207

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-11-20 18:35:39 首次发布

本文链接：https://blog.csdn.net/weixin_65062168/article/details/134515945

版权

一、说明

该库旨在通过 HTTP 上传大文件时引入容错功能。这是通过将每个文件分割成小块来完成的。然后，每当块上传失败时，就会重试上传，直到过程完成。这允许上传在本地或服务器的网络连接丢失后自动恢复上传。此外，它允许用户暂停、恢复甚至恢复上传而不会丢失状态，因为只会中止当前上传的块，而不是整个上传。

二、demo

<body>
    <button id="browseButton"></button>
    <div id="dropUpload"></div>
    <!-- 引用 resumable.js -->
    <script src=""></script>
    <script>
        let r = new Resumable({
            target: '/java-example/upload', // 目标上传的地址
            chunkSize: 1 * 1024 * 1024, // 分片大小
            testChunks: true, // 开启断点，允许刷新浏览器或者断网情况下，恢复网络后继续上传
            testTarget:'/test.target', // 开启断点续传后，发起的是一个 get 请求，此地址为测试该片是否已经上传，检测上传后则跳过进行下一个检测，200表示已经存在 204表示不存在
            forceChunkSize:true, //强制所有块小于或等于 chunkSize,否则可能导致分片不准
            query:{
                key:'fskv'
            }, // 自定义参数，或者以函数的方式进行返回
            // query: function(file) {
            //     return {
            //         key: file.file.name
            //     }
            // } // 使用函数的方式可以动态修改参数
        });
        r.assignDrop($('dropUpload')[0]); // 拖拽上传
        r.assignBrowse($('#browseButton')[0]); // 点击文件上传
        r.on('fileAdded', function (file, event) {
            // 文件上传成功事件
        });
        r.on('fileSuccess', function (file, message) {
            // 文件上传到服务器，message可以拿到返回的信息
        });
        r.on('fileError', function (file, message) {

        });
    </script>
</body>

注：该分片从1开始，若想从0开始修改源码 $.offset 即可

三、官网

https://github.com/23/resumable.js/tree/master

Power!!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
大文件支持断点与分片 resumable.js

该库旨在通过 HTTP 上传大文件时引入容错功能。这是通过将每个文件分割成小块来完成的。然后，每当块上传失败时，就会重试上传，直到过程完成。这允许上传在本地或服务器的网络连接丢失后自动恢复上传。此外，它允许用户暂停、恢复甚至恢复上传而不会丢失状态，因为只会中止当前上传的块，而不是整个上传。注：该分片从1开始，若想从0开始修改源码 $.offset 即可。
复制链接

扫一扫