js-chunk-file-upload

序言

js-chunk-file-upload是用于处理大文件切片断点续传的工具，相较于其他断点续传包，在已有的切片，断点续传基础上新增自定义上传请求，使用更为灵活。

项目信息

1. 原创作者：Peoren
2. 开源协议：MIT
3. 发布日期：2022-04-2
4. 联系方式：[e-mail]
5. 开源地址：https://github.com/peoren/chunk-file-upload.git

用法

$ npm i js-chunk-file-upload

        // 最好是一个文件创建一个实例,初始化时定义大小和模式
        const cuf = new ChunkUploadFile({
            size: 10240,
            //   accept:['.zip','.png']
        })
        // 打开文件对话框
        cuf.readFile()
        // 钩子函数： 文件读取完毕
        cuf.onFileReadEnd = function (file, fileId) {
            const formdata = new FormData
            formdata.append('md5', fileId)
            console.log('file', file);
            // first request
            setTimeout(() => {
                // 文件发送接口，
                // customReq为自定义请求，必传参数，当请求完毕后调用next()函数，以便内部获知。
                // savedChunkIds为已经上传的数组，传入已经上传chunkId数组，将会跳过这些数据，避免重复上传。
                cuf.sendFile({
                    customReq: function (file, next) {
                        console.log('单独的切片文件-》', file);
                        file.chunks = file.chunkLength
                        file.chunk = file.chunkId
                        file.chunkSize = cuf.chunkSize
                        // 将单个文件包装成formdata,当然也可以自己处理
                        const data = cuf.packgeChunk(file)
                        file = null
                        // upload request
                        setTimeout(() => {
                            next()
                        }, 1000);
                    }
                })
            }, 1000);


        }
        // 文件转hash进度
        cuf.hashProgress = function (r) {
            console.log('文件转哈希进度==>', r);
        }
        // 钩子函数

        // 单个上传失败
        cuf.onUploadFail = function (err, index) {
            console.log(err, index);
        }
        // 单个文件上传完成
        cuf.onUpload = function (res, index) {
            console.log(res, index);
        }
        // 暂停
        cuf.onPaused = function () {
            console.log('暂停了');
        }
        // 继续
        cuf.onContinue = function () {
            console.log('继续了');
        }
        // 全部上传完成
        cuf.onFullUpload = function (fileId) {
            console.log('全部传送完毕');
        }
        // 监听销毁
        cuf.onDestroy = function () {
            
        }
        // 监听重置
        cuf.onRestart = function () {
            
        }
        // 暂停方法
        cuf.pauseUpload()
        // 继续方法
        cuf.continueUpload()
        // 将单个file包装成formData
        cuf.packgeChunk()
        // 销毁生命周期
        cuf.destroy()
        // 重置
        cuf.restart()

示例

demo目录内有简单的示例代码

主要功能

文件上传：文件切片，上传，断点续传。

生命周期：文件转哈希-文件读取-单个文件上传-记录整合数据-上传完成

操控：能够打断上传过程

续传：在sendFile()方法中定义了接口，可以通过传入已经上传的chunkId来达到续传功能。

哈希进度：在文件读取，转哈希时会将文件全部读取，并逐步转md5，所以耗费时间较多，在hashProgress(progress)中可以获取进度

小于切片大小的文件：TODO

开源协议

MIT

参数

（请勿随意修改，只读，修改参数请通过接口修改）

参数名称	含义	类型	值
size	切片大小,默认1m	Number	默认1024*1024
mode	发送请求方式，有并行和串行，默认串行	String	'serial'||'parallel'
accept	上传文件类型	Array[String]	默认不限制。例：['.zip','.png']

实例上的参数

（请勿随意修改，只读，修改参数请通过接口修改）

参数名称	含义
state	生命周期（ready parse upload paused finish destroy fail）
chunkSize	分片大小
fileId	文件hash值
hashProgress	计算hash回调函数
fileChunkList	切片后的文件
file	文件
fileSize	文件名称
chunkLength	分片数量
paused	暂停
mode	模式（并行:parallel，串行：serial）
customReq	自定义请求

生命周期|钩子函数

方法名称	参数	功能
hashProgress	progress: 进度信息	文件转哈希读取中
onFileReadEnd	file, fileId	文件读取完成
onUpload	progress:总体上传进度，chunkId	文件上传完成
onFullUpload	fileId	全部上传完成
onPaused	无	暂停后
onContinue	无	继续后
onDestroy	无	销毁后
onRestart	无	重置后

方法

方法名称	参数
readFile	无
ChunkUploadFile	传入：可选{size:number,mode:string},size:为切片大小，mode为模式：并行:parallel（无法使用暂停继续），串行：serial
sendFile	{customReq:function,savedChunkIds:Array}, customReq:funtion(file:File, next:function){}自自定义是上传函数，必穿，传入file:单个切片文件，next完成上传后调用。savedChunkIds：可选，chunkId数组
continueUpload	续传
pauseUpload	暂停
destroy	销毁当前实例（若要彻底销毁请将实例赋值null）
restart	重置当前实例

联系我

[e-mail]