当前位置: 首页 > 工具软件 > Resumable.js > 使用案例 >

resumable.js大文件切片上传

顾光明
2023-12-01

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)

 类似资料: