大文件分片上传预研

// 切片大小
const ChunkSize = 10 * 1024 * 1024;

// 生成文件切片
function generateChunks(file: any) {
  const chunks = [];
  let cur = 0;
  while (cur < file.size) {
    chunks.push({ file: file.slice(cur, cur + ChunkSize) });
    cur += ChunkSize;
  }
  return chunks;
}

function uploadChunks(chunks: any) {
  const requests = chunks.map((chunk: any, index: number) => {
    const formData = new FormData();
    formData.append("chunk", chunk.file);
    formData.append("hash", "hash-" + index);
    formData.append("index", index.toString());
    return apis.upload.uploadChunk(formData);
  });
  return Promise.all(requests);
}

/**
假设你有9个请求在数组 `requests` 中，并且并发限制 `limit` 为3。那么我们期望在任何时刻，
都最多有3个请求在同时进行，并且当其中的某个请求完成时，我们希望从队列中取出下一个请求来进行处理。
下面是代码执行过程的分解：
1. **初始化阶段**: 初始化一个空的 `results` 数组来存储每个请求的结果，并创建一个函数 `processRequest`，用于逐个处理队列中的请求。
2. **并发执行阶段**: 通过`Array.from`创建一个 `Promise` 数组 `concurrent`，该数组包含3个执行中的 `processRequest` 调用的Promise。这3个Promise代表了同时执行的3个请求。
3. **递归处理阶段**: 每次调用 `processRequest`，它都会从 `requests` 队列中取出一个请求，并用 `await` 执行它。一旦请求完成，结果会被推入 `results` 数组，并且函数会再次递归调用自身，检查队列中是否还有更多的请求。
   - 如果队列中还有请求，则取出下一个请求并递归处理。
   - 如果队列为空，则递归调用将停止。
4. **等待所有并发请求完成**: 通过 `await Promise.all(concurrent)`，我们等待所有并发的请求完成。由于我们的递归处理方式，这包括等待任何后续从队列中取出的请求。
5. **返回结果**: 返回包含所有请求结果的数组 `results`。
关于如何补充新的请求，每次一个请求完成并将结果添加到 `results` 数组后，`processRequest` 函数就会再次递归调用自身。如果 `requests` 队列中还有请求，则会立即取出并开始处理下一个请求。
`concurrent` 数组存储的内容是并发执行中的3个 `processRequest` 调用的Promise。这3个Promise会同时开始处理，每个都处理 `requests` 队列中的一个请求，并在其中一个请求完成后立即补充新的请求（如果队列中还有请求）。
 */
async function handleRequests(requests: any[], limit: number) {
  const results = [] as any[] // 存储所有请求的结果

  // 定义一个递归函数，用于处理请求并控制并发数量
  async function processRequest() {
    if (requests.length > 0) {
      // 如果还有请求在队列中
      const request = requests.shift() // 从队列中取出一个请求
      console.log('request剩余==>', requests.length)

      const result = await request() // 执行请求并等待其完成
      results.push(result) // 将结果存储
      // 递归调用，确保有新的请求补充进去
      await processRequest()
    }
  }

  // 创建一个 Promise 数组，用于执行并发的请求
  const concurrent = Array.from({ length: Math.min(limit, requests.length) }, () => processRequest())

  // 等待所有并发的请求完成
  await Promise.all(concurrent)

  return results // 返回所有请求的结果
}

// /public/hash.js
importScripts("./spark-md5.min.js"); // 请确保路径是正确的

self.onmessage = function (e) {
  const { chunks } = e.data;
  const hashes = [];

  let progress = 0;
  for (const chunk of chunks) {
    const spark = new SparkMD5.ArrayBuffer();
    const reader = new FileReaderSync();
    const arrayBuffer = reader.readAsArrayBuffer(chunk.file);
    spark.append(arrayBuffer);
    const hash = spark.end();
    hashes.push(hash);
    progress++;
    self.postMessage({ progress: (progress / chunks.length) * 100 });
  }

  self.postMessage({ hashes });
};

// 生成上传请求，排除已完成的分片
function generateRequests(chunks: any, chunkHashes: any[]) {
  abortController.value = new AbortController();
  signal.value = abortController.value.signal;

  const completedChunks = JSON.parse(
    localStorage.getItem("completedChunks") || "[]"
  );
  const setCompletedChunks = new Set(completedChunks);

  const requests = chunks
    .map((chunk: any, index: number) => {
      const hash = chunkHashes[index];
      const formData = new FormData();
      // 过滤未上传成功的
      if (!setCompletedChunks.has(hash)) {
        console.log("没有");
        formData.append("chunk", chunk.file);
        formData.append("hash", hash); // 使用 hash 属性
        formData.append("index", index.toString());
        return () =>
          apis.upload
            .uploadChunk(
              { index, hash },
              { signal: abortController.value.signal }
            )
            .then(() => {
              // 接口完成，记录在localstorage
              completedChunks.push(hash);
              localStorage.setItem(
                "completedChunks",
                JSON.stringify(completedChunks)
              );
            });
      } else {
        return null;
      }
    })
    .filter(Boolean);
  return requests;
}

// 生成上传请求，排除已完成的分片
function generateRequests(chunks: any, chunkHashes: any[]) {
  abortController.value = new AbortController();
  signal.value = abortController.value.signal;

  const completedChunks = JSON.parse(
    localStorage.getItem("completedChunks") || "[]"
  );
  const setCompletedChunks = new Set(completedChunks);

  const requests = chunks
    .map((chunk: any, index: number) => {
      const hash = chunkHashes[index];
      const formData = new FormData();
      // 过滤未上传成功的
      if (!setCompletedChunks.has(hash)) {
        console.log("没有");
        formData.append("chunk", chunk.file);
        formData.append("hash", hash); // 使用 hash 属性
        formData.append("index", index.toString());
        return () =>
          apis.upload
            .uploadChunk(
              { index, hash },
              { signal: abortController.value.signal }
            )
            .then(() => {
              // 接口完成，记录在localstorage
              completedChunks.push(hash);
              localStorage.setItem(
                "completedChunks",
                JSON.stringify(completedChunks)
              );
            });
      } else {
        return null;
      }
    })
    .filter(Boolean);
  return requests;
}

// 取消上传的函数
const abortController = ref();
const signal = ref();

function handleCancel() {
  console.log("⭐取消上传");
  abortController.value.abort(); // 取消与该信号相关联的所有请求
  showCancel.value = false;
}