resumable.js大文件切片上传

resumable.js大文件切片上传，支持断点续传、暂停、继续、删除、拖拽等功能

实例化一个resumable对象

import Resumable from "resumablejs"

const r = new Resumable({
    target: url, //上传文件post请求的地址
    testTarget：'', //查询文件每一块是否已经上传的地址
    chunkSize: 1 * 1024 * 1024, //文件分块时每一块的大小，最后一块至少一个此大小，最大两个此大小，此处为默认值，可自定义
    forceChunkSize: false, //是否强制每块小于等于chunkSize，否则最后一块将大于或等于，默认false
    simultaneousUploads: 3, //同时上传块的数量， 默认3
    fileParameterName: 'file', //文件块分段请求的参数名称，默认file
    chunkNumberParameterName: 'resumableChunkNumber', //当前上传块post请求参数中块索引的名称，默认resumableChunkNumber
    totalChunksParameterName: 'resumableTotalChunks', //post请求中文件分块总数的参数名称，默认resumableTotalChunks
    chunkSizeParameterName: 'resumableChunkSize', //post请求中文件块的常规块大小的参数名称，默认resumableChunkSize
    totalSizeParameterName: 'resumableTotalSize', //post请求中文件分块前的总大小参数名称，默认resumableTotalSize
    identifierParameterName: 'resumableIdentifier', //post请求中块的唯一标识符参数名称，默认resumableIdentifier
    fileNameParameterName: 'resumableFilename', //post请求中文件分片前的文件名参数名称，默认resumableFilename
    relativePathParameterName: 'resumableRelativePath', //post请求中块的相对路径参数名称，默认resumableRelativePath
    currentChunkSizeParameterName: 'resumableCurrentChunkSize', //post请求中当前块大小的参数名称，默认resumableCurrentChunkSize
    typeParameterName: 'typeParameterName', //块的文件类型post参数名称，默认typeParameterName
    query: {}, //数据分段请求中的额外参数，可以是对象或者函数，如果是函数，则会向其传递一个 ResumableFile 和一个 ResumableChunk 对象，默认{}
    testMethod: 'GET', //块测试请求的方法，默认'GET'
    uploadMethod: 'POST', //向服务器发送块的请求方法，默认(POST PUT PATCH POST)
    parameterNamespace: '', //在分段post或测试get中的每个参数名称前加的额外前缀，默认''
    headers: {}, //请求头配置
    method: , //向服务器发送块的方法，默认multipart octet multipart
    prioritizeFirstAndLastChunk: false, //确定所有文件的第一个和最后一个区块的优先级,默认false
    testChunks: true, //为每个块向服务器发出 GET 请求，以查看它是否已存在，默认true
    preprocess: null, //在测试和发送之前处理每个块的可选功能。函数将块作为参数传递，完成后在块上调用该方法。
    generateUniqueIdentifier(file, event), //重写每个文件生成唯一标识符的函数
    maxFiles: 3, //单个会话可以上传的文件数，默认undefined
    maxFilesErrorCallback(files, errorCount), //显示一个警告框，其中包含消息'Please n one file(s) at a time'
    minFileSize: undefined, //允许上传的最小文件大小，默认undefined
    minFileSizeErrorCallback(file, errorCount), //显示所选文件小于最小文件大小的警告，默认为每个小于最小文件显示警告
    maxFileSize: undefined, //允许上传的最大文件大小，默认undefined
    maxFileSizeErrorCallback(file, errorCount), //显示所选文件大于最大文件大小的警告，默认为每个大于最大文件显示警告
    fileType: [], //允许上传的文件类型，默认[]，[]允许所有文件类型
    fileTypeErrorCallback(file, errorCount), //显示所选文件不符合允许上传的文件类型警告，默认为每个不符合文件类型的文件显示警告
    maxChunkRetries: undefined, //上传失败的块最大重试次数，默认undefined
    chunkRetryInterval: undefined, //在出现非永久性错误时重试块上传等待的毫秒数，默认undefined
    withCredentials: false, //默认情况下，标准 CORS 请求不会发送或设置任何 Cookie。为了在请求中包含 Cookie，您需要将该属性设置为 true
    xhrTimeout: 0, //每个请求超时的时间
    setChunkTypeFromFile: false, //从原始文件类型设置块内容类型
})

r.assignBrowse(dom) //将resumable对象绑定给一个或多个dom对象(仅限Chrome)
r.assignDrop(dom) //将resumable对象绑定一个或多个dom对象
r.on(event, callback) //监听来自resumable对象的事件
r.upload()  //开始或恢复上传
r.pause()  //暂停上传
r.cancel()  //取消并移除所有上传对象
r.progress() //返回一个0-1之间的浮点数，所有文件当前的上传进度
r.isUploading()  //实例当前是否正在上传
r.addFile(file) //添加文件
r.addFiles(files) //添加文件数组
r.removeFile(file) //取消指定文件上传
r.getFromUniqueIdentifier(uniqueIdentifier)  //通过对象的唯一标识符查找对象
r.getSize()  //返回上传的总大小

可以通过r.on()监听progress()事件实时获取文件上传进度并渲染进度条

r.on('progress', () => {
    let num = r.progress()
})

详情查看官方文档：23/resumable.js：一个JavaScript库，用于通过HTML5文件API提供多个同时，稳定，容错和可恢复/可重启的上传。 (github.com)