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)