实践一个大文件上传

<script setup lang="ts">
import asyncPool from 'tiny-async-pool'
import { hash } from '@/utils'
import { reactive, ref } from 'vue'

const CHUNK_SIZE = 1024 * 512

type Task = {
  index: number
  blob: Blob
  name: string
  fileHash: string
  sliceHash: string
  isComplete: boolean
}

const inputRef = ref<HTMLInputElement | null>(null)
const tasks = reactive<Task[]>([])
const url = ref('')

async function uploadSingleFile() {
  let uploadedSize = 0
  const file = inputRef?.value?.files?.[0]
  if (!file) {
    return
  }

  const fullHash = await hash(await file.arrayBuffer())

  let index = 0
  while (uploadedSize < file.size) {
    index++
    const fileChunk = file.slice(uploadedSize, uploadedSize + CHUNK_SIZE)
    const sliceHash = await hash(await fileChunk.arrayBuffer())

    tasks.push({
      index,
      blob: fileChunk,
      fileHash: fullHash,
      sliceHash: sliceHash,
      name: file.name,
      isComplete: false
    })
    uploadedSize += fileChunk.size
  }

  for await (const result of asyncPool(5, tasks, doTask)) {
    console.log(result)
  }

  const formData = new FormData()
  formData.append('fileHash', fullHash)
  const response = await fetch('http://127.0.0.1:8080/merge', {
    method: 'POST',
    body: formData
  })
  const json = await response.json()
  url.value = json.url
}

function doTask(task: Task) {
  return new Promise(async (resolve, reject) => {
    try {
      const formData = new FormData()
      formData.append('index', task.index.toString())
      formData.append('name', task.name)
      formData.append('fileHash', task.fileHash)
      formData.append('sliceHash', task.sliceHash)

      const verifyResponse = await fetch('http://127.0.0.1:8080/verify', {
        method: 'POST',
        body: formData
      })
      let message = await verifyResponse.json()
      if (message.exist) {
        // 已上传
        task.isComplete = true
        resolve('已上传，跳过这个 blob')
        return
      }

      // 未上传
      formData.append('file', task.blob)
      const response = await fetch('http://127.0.0.1:8080/upload', {
        method: 'POST',
        body: formData
      })
      message = await response.json()
      task.isComplete = true
      resolve(message)
    } catch (error) {
      reject(error)
    }
  })
}
</script>

<template>
  <main class="flex flex-col items-center gap-4">
    <h1 class="text-3xl font-bold pt-4">大文件上传</h1>
    <input
      ref="inputRef"
      type="file"
      class="file-input file-input-bordered file-input-warning w-full max-w-xs"
    />
    <button class="btn gap-2" @click="uploadSingleFile">上传</button>
    <a :href="url">{{ url }}</a>
    <div class="flex w-64 gap-2 flex-wrap">
      <div
        v-for="item in tasks"
        :key="item"
        class="flex-shrink-0 w-4 h-4 bg-gray-200"
        :class="{ 'bg-green-500': item.isComplete }"
      ></div>
    </div>
  </main>
</template>