ts-chunk-file-upload

序言

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

项目信息

1. 原创作者：Peoren
2. 开源协议：MIT
3. 发布日期：2024-03-27
4. 联系方式：[email protected]
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 | 重置当前实例 |

联系我

[email protected]