file-slicing-processor

场景

主要用来处理web端文件分片上传过程中文件分片的过程，提供文件切片，进度条（上传进度、文件md5进度），输出文件碎片等功能（支持TS）

通过以上功能可实现文件分片上传、断点续传、秒传等文件上传操作

安装

npm install file-slicing-processor

快速上手

1. 简单文件分片上传业务场景

  import FileSlicingProcessor from 'file-slicing-processor'

  const file = document.querySelector('#file').files[0]
  let done = false

  const processor = new FileSlicingProcessor(file, {
    chunkSize: 100 * 1024 * 1024,
    onProgress (progress) {
      console.log(`uplaod progress is ${progress}`)
    },
    onFinished (fileInfo) {
      console.log(`the file upload done, the file info is `, fileInfo)
      done = true
    },
    onError (err) {
      console.error(`file upload error, err: `, err)
    },
    httpRequest (params) {
      // 自定义请求必须返回一个Promise结果
      return axios.post(`/file/upload`, params)
    }
  });

2. 大文件秒传和断点续传业务场景

import FileSlicingPorcessor from 'file-slicing-processor'

const file = document.querySelector('#file').files[0]
let done = false

const processor = new FileSlicingProcessor(file, {
 onProgress (progress) {
   console.log(`uplaod progress is ${progress}`)
 },
 onFinished (fileInfo) {
   console.log(`the file upload done, the file info is`, fileInfo)
   done = true
 },
 onError (err) {
   console.error(`file upload error, err: `, err)
 },
 onFileMD5Progress (progress) {
   console.log(`file md5 progress is ${progress}`)
 },
 httpRequest (params) {
   return axios.post(`/file/upload`, params)
 }
})

processor.getFileRealMD5().then(async md5 => {
 console.log(`file real md5 is ${md5}`)
 // 若服务端存在此文件，则实现秒传
 const serverMD5 = await axios.post(`/query/file/info`, {
   fileName: file.name,
   fileSize: file.size,
   md5
 })
 if (serverMD5 === md5) {
   done = true
   processor.done()
 }
})

// 断点续传，当已上传3个碎片时
const fileInfo = processor.getFileInfo()
processor.start(fileInfo.uploadedChunks)
// 暂停
processor.pause()
// 重启
processor.play()

API

1. 属性

| 名称 | 说明 | 类型 | 参数 | | :--- | :---- | :---- | :---- | | chunkSize | 碎片大小 | Number | 无 | | uploadedChunkNum | 已上传碎片数 | Number | 无 | | chunkMD5 | 碎片MD5 | Boolean | 默认为 false | | retryCount | 重试次数 | Number | 默认值为3次 | | httpRequest | 自定义请求方法 | Function | params: HttpRequestParams | | onProgress | 上传进度回调 | Function | progress?: Number 进度（百分比数值） | | onFinished | 文件分片完成回调 | Function | params: { fileInfo: FileInfo } | | onFileMD5Progress | 文件MD5进度回调 | Function | progress?: Number 进度（百分比数值）

2. 方法

| 名称 | 说明 | 参数 | 返回值 | | :-- | :-- | :-- | :-- | | getFileInfo | 获取文件信息 | 无 | FileInfo | getFileRealMD5 | 异步获取文件精准MD5 | 无 | Promise.then() / Promise.catch() | | getChunk | 获取当前文件碎片 | 无 | Blob | | getChunkMD5 | 获取当前碎片MD5 | 无 | Promise.then() / Promise.catch() | | start | 文件分片开始 | num: 文件碎片索引，代表从第几片开始切片 | 无 | | pause | 文件分片暂停 | 无 | 无 | | play | 文件分片重启 | 无 | 无 | | done | 文件分片完成 | 无 | 无 | | next | 文件分片下一次操作指令方法 | 无 | 无 |

3. 类型

| 接口 | 属性 | | :-- | :-- | | FileInfo | id: Number （当前文件唯一标识） name: String（文件名） size: Number（文件size） totalChunks: Number（文件碎片总数） md5: String（文件md5） uploadedChunks: Number（已上传碎片数） } | | HttpRequestParams | chunk: Blob（文件碎片） chunkNum: Number（碎片索引） chunkMD5?: String （碎片MD5，chunkMD5 为 true 时返回） 方法必须返回一个 promise 的结果

说明

这个工具库主要是对文件进行分片操作，不参与文件碎片的上传过程，这样可以让用户灵活的进行二次开发，工具库会提供一系列的回调函数来反馈文件分片过程中的进度和状态

注意事项

• 进度条是通过碎片索引/总碎片数得到的，所以需要细粒度的进度参数可以通过设置更小的分片阈值实现
• 文件 md5 默认为name、size、lastModified连接的字符串，如果需要准确的md5，可以使用getFileRealMD5方法来异步获取，并提供md5过程的进度回调函数
• 分片阈值默认为50MB