JavaScript_大文件切片上传

bigfile-chunk-upload

功能

大文件截取分块上传，带请求并发控制、错误重发功能。

教程（以Vue为例）

下载

npm install bigfile-chunk-upload

引入

// page.vue
import bigFileToChunkUpload from 'bigfile-chunk-upload';

使用

示例

async function beforeUpload(e) {
  const file = e.target.files[0]
  // 调用
  await bigFileToChunkUpload({
    file, // 文件对象
    uploadPromiseFn: upload, // 上传请求函数，promise
    againSend: false, // 是否失败重发，默认true
    chunkSize: 2, // 块大小，默认5M
    oneTimeFefchMaxCount: 4 // 并发请求，默认6个
  }).then(res => {
    // 上传操作完成，这里可以调用合并操作
  })
}

// 自定义上传函数，作为第二个参数传递，需要return Promise
function upload(data) {
  /**
   * data获取到 插件返回的切片数据、索引、切片文件名，方便自定义上传参数
   * data = {
   *    index: ${索引},
   *    name: `${文件名}_chunk${索引}.${文件类型}`,
   *    chunk: ${切片块_文件对象}
   * }
   **/
  return new Promise((resolve, reject) => {
    // 模拟请求
    setTimeout(() => {
      resolve('ok')
    }, 2000 + Math.random() * 1000)
  })
}

参数

bigFileToChunkUpload({
  file, // 文件对象
  uploadPromiseFn, // 上传请求函数，需要promise类型
  againSend = true, // 是否失败重发，默认true
  chunkSize = 5, // 块大小，默认5M
  oneTimeFefchMaxCount = 6 // 并发请求，默认6个
})

演示

http://zh1q1.net3v.net/bigfile/bigfileUpload.html