vue+ts大文件切片上傳的實現示例

更新時間：2024年01月23日 08:39:33 作者：西湖龍井君

在Vue項目中,大圖片和多數據Excel等大文件的上傳是一個非常常見的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價值，感興趣的可以了解一下

1. src 下的.vue 文件 src/APP.vue

#  src/APP.vue

<template>
    <div>
        <input type="file" @change="onChange">
    </div>
</template>
  
<script setup lang="ts">
import { getFileChunksAndHash } from './utils';

const onChange = (event: Event) => {
    // 文件
    const file = (event.target as HTMLInputElement).files?.[0]!
    getFileChunksAndHash(file).then((result) => {
        console.log("chunkList", result.chunkLish);
        console.log("hash", result.hash);

    }).catch((error: Error) => {
        console.log("失敗", error);

    })
}
</script>

2. src下文件夾，與上方??代碼在同一目錄 src/utils/index.ts

#  src/utils/index.ts

import SparkMD5 from "spark-md5";
// 讀取所有切片和hash
export function getFileChunksAndHash(
  file: File
): Promise<{ chunkLish: Blob[]; hash: string }> {
  console.time("computed");
  return new Promise((resolve, reject) => {
    // 切片集合
    const chunkLish: Blob[] = [];
    // 切片大小
    const chunkSize = 1024 * 1024 * 2;
    // 切片數量
    const chunks = Math.ceil(file.size / chunkSize);
    // 當前切片下標
    let currentChunk = 0;
    // SparkMD5 實例
    const spark = new SparkMD5.ArrayBuffer();
    // fileReader 實例
    const fileReader = new FileReader();

    // 讀取成功
    fileReader.onload = function () {
      // 讀取到的內容
      const result = this.result as ArrayBuffer;
      // 將 result 追加到 計算hash 的操作中
      spark.append(result);
      // console.log("result", result);
      currentChunk++;

      if (currentChunk < chunks) {
        loadNext();
      } else {
        const hash = spark.end();
        console.timeEnd("computed");
        // console.log("hash為:", hash);
        // 讓 promise 完成
        resolve({
          chunkLish,
          hash,
        });
      }
    };
    // 讀取失敗
    fileReader.onerror = function (error) {
      // console.log("失敗", error);
      reject(error);
    };
    // 定義一個 loadNext 方法
    function loadNext() {
      // console.log(`read ${currentChunk + 1} of ${chunks}`);

      // 開始字節(jié)
      const start = currentChunk * chunkSize;
      // 結束字節(jié)
      const end =
        start + chunkSize >= file.size ? file.size : start + chunkSize;
      // 切片
      const chunk = file.slice(start, end);
      // 將 chunk 追加到 chunkLish 中
      chunkLish.push(chunk);
      // 讀取該切片的內容
      fileReader.readAsArrayBuffer(chunk);
    }
    // 默認調用一次 loadNext
    loadNext();
  });
}