js-chunk-file-upload v0.1.10

js-chunk-file-upload

序言

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

项目信息

1. 原创作者：Peoren
2. 开源协议：MIT
3. 发布日期：2022-04-2
4. 联系方式：hjw_ready@163.com
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

参数

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

实例上的参数

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

生命周期|钩子函数

方法

联系我

hjw_ready@163.com