js分片上传&断点续传

原理

js将大文件分成多分，全部上传成功之后，调用合并接口合成文件。如果传输中断，下次上传的时候过滤掉已经上传成功的分片，将剩余的分片上传，成功之后合并文件。

前置条件

• 获取uoloadId接口（用于标记分片）
• 分片上传接口
• 合成文件接口（后端自动合成则不需要）
• 查询已上传的分片列表接口（断点续传）

文件分片

h5中使用slice就可以分割文件

// 文件分片大小
const maxFileSize = 100 * 1024
// 分片数量
const nums = Math.ceil(file.size / maxFileSize)
for (let i = 1; i <= nums; i++) {
  // 文件上传进度
  let progress = 0
  // 分割文件  上传
  upload(file.slice((i - 1) * maxFileSize, i * maxFileSize), uploadId).then(() => {
    progress++
    if (progress >= nums) { // 完全上传成功
      // 合并文件
      merge(uploadId).then(res => {
        // 返回文件地址
        console.log(res)
      })
    }
  })
}

断点续传

在上传分片的时候我们将文件和uploadId存入本地，下次上传时用uploadId从接口获取已经上传成功的分片（这里没有接口，我们存入本地），将已上传的分片过滤，上传剩余。

// 使用文件的属性拼成一个唯一id，作为localStorage的key
const id = file.lastModified + file.size + file.type + file.name
// 取uploadId 和 已上传成功的分片
let { ids = [], uploadId } = Storage.getObj(id)
// 进度
let progress = ids.length
// 分片数量
const nums = Math.ceil(file.size / maxFileSize)
for (let i = 1; i <= nums; i++) {
  // 如果当前分片已经上传成功 跳过本次上传
  if (ids.includes(i)) continue
  // 分割文件  上传
  upload(file.slice((i - 1) * maxFileSize, i * maxFileSize), uploadId).then(() => {
    progress++
    if (progress >= nums) { // 完全上传成功
      // 合并文件
      merge(uploadId).then(res => {
        // 返回文件地址
        console.log(res)
      })
      // 合并请求之后清除缓存
      Storage.remove(id)
    } else {
      ids.push(i)
      // 已上传的分片存入本地
      Storage.setObj(id, {
        ids,
        uploadId
      })  
    }
  })
}

完整代码

class Uploader {
  // 分片大小(kb)
  chunkSize = 0

  uuid = ''

  constructor({ chunkSize, upload, mergeFile, getUploadId }) {
    this.uuid = uuidv4()
    this.chunkSize = chunkSize * 1024
    this.upload = upload // 上传文件
    this.mergeFile = mergeFile // 合并文件
    this.getUploadId = getUploadId // 获取uploadId
  }

  async start(file, onProgress) {
    // 判断是否使用分片上传
    if (this.chunkSize > 0 && file.size > this.chunkSize) {
      // uuid拼接文件各个属性, 作为localStorage的key
      const key =
        this.uuid + file.lastModified + file.size + file.type + file.name
      // 去缓存中已上传的分片和uploadId
      let { chunks = [], uploadId } = Storage.getObj(key)
      // 从接口去uploadId
      if (!uploadId) {
        uploadId = await this.getUploadId()
      }
      return new Promise(resolve => {
        const chunkNums = Math.ceil(file.size / chunkSize)
        // 进度
        let progress = 0

        for (let i = 0; i < chunkNums; i++) {
          // 缓存中存在已上传的分片 跳过上传
          if (chunks.includes(e => e.index === i)) continue
          this.upload(
            file.slice(i * chunkSize, (i + 1) * chunkSize),
            uploadId,
            i
          ).then(async res => {
            chunks.push({
              index: i,
              chunk: file.slice(i * chunkSize, (i + 1) * chunkSize),
              uploadData: res.data
            })

            progress++
            onProgress(progress / chunkNums)
            if (progress >= chunkNums) {
              // 全部分片上传成功
              Storage.remove(key)
              if (this.mergeFile) {
                resolve(await this.mergeFile(chunks, uploadId))
              }
              resolve(res)
            } else {
              Storage.setObj(key, {
                chunks,
                uploadId
              })
            }
          })
        }
      })
    } else {
      return this.upload(file)
    }
  }
}

// 实例化
const uploader = new Uploader({
  chunkSize: 100,
  getUploadId: GetUploadId,
  upload: (file, uploadId, index) =>
    UploadFile(file, uploadId, index && index + 1),
  mergeFile: (chunks, uploadId) =>
    MergeFile(
      uploadId,
      chunks.map(e => ({ partNumber: e.index + 1 }))
    )
})

// 上传图片调用
async change(e) {
    console.log(e.target.files)
    if (!e.target.files.length) return
    const { data } = await uploader.start(
      e.target.files[0],
      e => (this.progress = e)
    )
    console.log(readUrl + data.data)
}

大文件下载

同理，当需要下载大文件时，可以将文件拆分（后端支持），下载完成后在前端拼接成一整个文件。

const chunks = []
const nums = Math.ceil(file.size / maxFileSize)
for (let i = 1; i <= nums; i++) {
  chunks.push(file.slice((i - 1) * maxFileSize, i * maxFileSize))
}
const blob = new Blob(chunks)

参考文章：http://blog.ncmem.com/wordpress/2023/10/19/js%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0-2/

欢迎入群一起讨论