js 大文件切片，中止上传，上传进度，断点续传

大文件切片上传
背景介绍：当涉及大文件上传时，一种有效的方法是将大文件分割成小切片并逐个上传。这种技术不仅可以减轻服务器的负担，还可以避免上传过程中的中断和内存问题。本文将介绍如何使用JavaScript实现大文件切片上传，并解释如何处理断点续传、并发控制以及上传取消等问题，用到的知识点有大文件切片、中止上传 、上传进度、断点续传、并发数量控制。

切片上传原理
大文件切片上传的基本原理是将文件分成多个固定大小的小切片，然后逐个上传到服务器。服务器收到这些切片后，可以按顺序合并它们，还原为完整的文件。这种方法不仅能提高上传效率，还能应对网络波动和服务器性能限制。

实现步骤
下面是实现大文件切片上传的基本步骤：

切片生成： 使用JavaScript将大文件切割成小切片，可以使用File API中的File.slice()方法。

切片上传： 将切片逐个上传到服务器，可以使用XMLHttpRequest或Fetch API发送切片数据。

服务器处理： 服务器接收并保存切片，并记录每个切片的索引。

切片合并： 当所有切片上传完成后，服务器按照索引顺序合并切片（或者后端提供合并接口将hash值传给后端进行合并），还原为完整文件。

断点续传
通过记录已上传切片的索引，即使上传过程中断，也可以从断点处继续上传。服务器只需判断已存在的切片，避免重新上传。

并发控制
为了避免同时上传大量切片导致网络拥塞，可以控制并发上传数。例如，一次最多只上传3个切片，等待其中一个完成后再上传下一个。

上传取消
允许用户在上传过程中取消操作是很重要的。为此，可以使用一个标记来判断是否取消上传，如果取消，则终止上传过程。

接下来，我们将深入探讨如何在JavaScript中实现这些功能。从切片生成和上传开始，逐步讲解如何处理断点续传、并发控制和上传取消。

话不多说，上代码

<template>
  <div class="manage">
    <input type="file" @change="handleFileChange" multiple />
    <button @click="stop">停止上传</button>
    <span>当前已上传：{{progress}}%</span>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  props: {
  },
  mounted () {
  },
  data () {
    return {
      progress: 0,
      stopUpload: false,
      totalChunks: null,
      selectedFiles: [],
      uploadPromises: [],
      concurrentLimit: 2 // 控制并发数量
    }
  },
  methods: {
    handleFileChange (event) {
      this.selectedFiles = Array.from(event.target.files)
      this.startUpload(event.target.files)
    },
    async uploadFile (file, index, total) {
      return new Promise((resolve, reject) => {
        // 模拟上传操作，实际上传操作可能需要使用 XMLHttpRequest 或其他上传库
        // setTimeout(async () => {
        //   console.log(`Uploaded: ${file.name}`)
        //   const formData = new FormData();
        //   formData.append('fileChunk', file);
        //   formData.append('chunkIndex', index);
        //   formData.append('totalChunks', total);
        //   const response = await fetch('upload-url', {
        //     method: 'POST',
        //     body: formData
        //   });
        //   const result = await response.json();
        //   resolve(result)
        // }, 1000) // 假设上传耗时 1 秒
        setTimeout(async () => {
          console.log(`Uploaded: ${file.name}`)
          resolve()
        }, 2000) // 假设上传耗时 1 秒
      })
    },
    async startUpload (file) {
      console.log('file', file)
      this.uploadPromises = []
      const size = 1024 * 1024
      const formNum = Math.ceil(file[0].size / size)
      const hashes = []
      for (let i = 0; i <= formNum; i++) {
        const start = size * i;
        const end = size * (i + 1)
        const chunk = file[0].slice(start, end);
        const hash = await this.calculateHash(chunk);
        console.log('this.stopUpload', this.stopUpload)
        if (this.stopUpload) return false
        hashes.push(hash)
        // 将需要上传的切片和对应的哈希值添加到FormData中
        // 断点续传逻辑需要后端判断，前端根据片段生成唯一hash值，后端存储hash,续传时候需要判断若已上传直接给出进度
        const promise = this.uploadFile(chunk, i, formNum)
        this.uploadPromises.push(promise)

        if (this.uploadPromises.length >= this.concurrentLimit) {
          await Promise.race(this.uploadPromises) // 控制并发
          this.uploadPromises.shift() // 移除已完成的 Promise
        }
        this.progress = (i / formNum) * 100
      }
      console.log('hashes', hashes)
      await Promise.all(this.uploadPromises) // 等待剩余的上传完成
      console.log('全部完成上传！')
      // 调用后端提供合并接口
      // const response = await fetch('upload-merge', {
      //   method: 'POST',
      //   body: hashes
      // })
    },
    async calculateHash (chunk) {
      const buffer = await chunk.arrayBuffer()
      const hashBuffer = await crypto.subtle.digest('SHA-256', buffer)
      const hashArray = Array.from(new Uint8Array(hashBuffer))
      const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('')
      return hashHex
    },
    stop () {
      this.stopUpload = true
    }
  }
}
</script>

参考文章：http://blog.ncmem.com/wordpress/2023/10/21/js-%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%87%e7%89%87%ef%bc%8c%e4%b8%ad%e6%ad%a2%e4%b8%8a%e4%bc%a0%ef%bc%8c%e4%b8%8a%e4%bc%a0%e8%bf%9b%e5%ba%a6%ef%bc%8c%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/
欢迎入群一起讨论