el-upload 切片计算大文件sha256

在使用 el-upload 进行大文件上传时，可以通过切片方式将文件分割成多个小块进行上传，以提高上传效率和稳定性。同时，为了保证上传文件的完整性和安全性，可以对每个切片进行 sha256 计算，生成唯一的哈希值，以便在上传过程中进行校验。

以下是一个示例代码，展示了如何使用 el-upload 进行切片上传，并计算每个切片的 sha256 值：

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    :action="uploadUrl"
    :on-change="handleChange"
    :headers="headers"
    :before-upload="beforeUpload"
    :on-progress="handleProgress"
    :on-success="handleSuccess"
    :on-error="handleError"
    :file-list="fileList"
    :auto-upload="false"
    :multiple="false"
    :limit="1"
    :show-file-list="false"
    :drag="false"
    :with-credentials="false"
    :data="{ chunkSize: chunkSize }"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import SparkMD5 from 'spark-md5'

export default {
  data() {
    return {
      uploadUrl: '/upload',
      headers: {},
      fileList: [],
      chunkSize: 2 * 1024 * 1024, // 2MB
      currentChunk: 0,
      totalChunks: 0,
      sha256: '',
      isUploading: false
    }
  },
  methods: {
    beforeUpload(file) {
      this.totalChunks = Math.ceil(file.size / this.chunkSize)
      this.currentChunk = 0
      this.sha256 = ''
      this.isUploading = true
      return true
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    handleProgress(event, file, fileList) {
      console.log('上传进度', event.percent)
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response)
      this.isUploading = false
    },
    handleError(error, file, fileList) {
      console.log('上传失败', error)
      this.isUploading = false
    },
    async uploadChunk(file, chunkIndex) {
      const start = chunkIndex * this.chunkSize
      const end = Math.min(start + this.chunkSize, file.size)
      const chunk = file.slice(start, end)
      const reader = new FileReader()
      return new Promise((resolve, reject) => {
        reader.onload = async () => {
          const spark = new SparkMD5.ArrayBuffer()
          spark.append(reader.result)
          const sha256 = await crypto.subtle.digest('SHA-256', reader.result)
          resolve({ data: reader.result, sha256: sha256 })
        }
        reader.onerror = () => {
          reject(reader.error)
        }
        reader.readAsArrayBuffer(chunk)
      })
    },
    async uploadFile(file) {
      const chunks = []
      for (let i = 0; i < this.totalChunks; i++) {
        const chunk = await this.uploadChunk(file, i)
        chunks.push(chunk)
      }
      console.log('上传文件', chunks)
      // 发送请求，将所有切片合并成完整文件
    },
    async startUpload() {
      const file = this.fileList[0].raw
      await this.uploadFile(file)
    }
  }
}
</script>

在这个示例代码中，我们通过设置 `chunkSize` 属性来指定切片大小，然后在上传前通过 `beforeUpload` 方法计算出需要上传的总切片数，以及初始化一些变量用于后续处理。在 `uploadChunk` 方法中，我们使用 `FileReader` 对象将每个切片读取成 ArrayBuffer，并使用 `SparkMD5` 库计算出 sha256 值。最后，我们在 `startUpload` 方法中遍历所有切片并依次上传，完成文件上传。需要注意的是，由于切片上传是异步的，因此需要使用 `Promise` 对象来等待所有切片上传完成后再执行后续操作。

通过以上代码示例，我们可以在 el-upload 中实现大文件切片上传，并计算每个切片的 sha256 值，从而保证上传文件的完整性和安全性。