大文件上传

使用的库

resumablejs
yarn add resumablejs

Api介绍

• 与后端交互有关的参数

  • resumableChunkNumber: 当前块的index
  • resumableChunkSize: 常规块的大小
  • resumableCurrentChunkSize: 当前块的大小
  • resumableTotalSize: 文件总共大小
  • resumableType: 文件类型
  • resumableIdentifier: 请求中包含的文件的唯一标识符
  • resumableFilename: 文件名称
  • resumableRelativePath: 文件相对路径
  • resumableTotalChunks: 总共的块数

• 交互相关方法

  • upload（）开始上传文件
  • cancel（）取消上传
  • addFile（file)添加文件
  • updateQuery（query） 修改你需要传给后端的额外信息
  • pause() 暂停
  • support（）查询当前浏览器是否支持该库
  • progress() 获取上传进度 0~1
  • isUploading（）是否在上传中
  • addFiles（file[]）
  • removeFile(file)
  • getFromUniqueIdentifier（uniqueIdentifier: string） 通过唯一标识符获取文件

• 交互时可以用的event，监听相关变化

  • fileSuccess 当某个文件全部块上传成功后触发 ，callback：(file: ResumableFile) => void
  • fileProgress 持续监听文件上传进度 callback： (file: ResumableFile) => void
  • fileError 当某个文件上传失败时候触发 callback：(file: ResumableFile, message: string) => void
  • uploadStart 开始上传文件时触发 callback: () => void
  • complete 文件上传完时触发 callback: () => void
  • error 上传失败时触发 callback: (message: string, file: ResumableFile) => void
  • pause 暂停上传时触发 callback: () => void
  • beforeCancel 取消之前触发
  • cancel 取消时候触发 callback: () => void
  • chunkingStart 文件块开始上传时触发 callback: (file: ResumableFile) => void
  • chunkingProgress 显示文件准备的进展 callback: (file: ResumableFile, ratio) => void
  • chunkingComplete 文件已经准备完成 callback: (file: ResumableFile) => void
  • catchAll 监听所有事件 callback: () => void

• ResumableFile（文件对象）

  • file:文件
  • fileName ：文件名字
  • relativePath：文件相对位置
  • size：文件大小
  • uniqueIdentifier 文件唯一标识
  • chunks ：该文件的块Array< ResumableChunk>
  • progress 该文件的进程
  • abort（）阻止该文件上传
  • cancel（） 取消该文件上传
  • retry（）重新上传
  • bootstrap（）重新构建ResumableFile对象的状态，包括重新分配数据块和XMLHttpRequest实例
  • isUploading（）是否在上传中
  • isComplete（）时候已经完成

  使用方法

  const ResumableField = new Resumablejs({
  …options
  })

• options

• target: string // POST请求的目标URL
• chunkSize?: number // 每个上传数据块的大小 (默认值:1 * 1024 * 1024)
• forceChunkSize?: boolean // 强制所有块小于或等于chunkSize。否则，最后一个块将大于或等于chunkSize。(默认值:false)
• simultaneousUploads?: number // 同时上传次数(默认3次)
• query?: IKeyValues // 在包含数据的多部分POST中包含额外的参数。
• fileList: ResumableFile[] | []
• method?: ‘multipart’ | ‘octet’ // 向服务器提交块时使用的方法(multipart或octet)(默认值:multipart)
• testChunks?: boolean // 为每个块向服务器发出GET请求，以查看它是否已经存在 默认为true
• maxChunkRetries?: number // 在上传失败之前，块的最大重试次数。有效值是任何正整数，且无极限未定义。(默认值:未定义)
• withCredentials?: boolean // 允许带cookie
• headers?: IKeyValues // 头部信息