ts-chunk-file-upload

序言

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

项目信息

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

用法

$ npm i ts-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]