大文件分片上传（前端TS实现）

不是，你来真的啊？2024-07-25 19:16

大文件分片上传

内容

一般情况下，前端上传文件就是new FormData,然后把文件 append 进去，然后post发送给后端就完事了，但是文件越大，上传的文件也就越长，如果在上传过程中，突然网络故障，又或者请求超时，等待过久等等情况，就会导致错误而后又得重新传大文件。所以这时候就要使用分片上传了，就算断网了也能继续接着上传（断点上传 ），如果是之前上传过这个文件了（服务器还存着），就不需要做二次上传了（秒传）。

7.17实现方式

首先获取文件信息后设定分片大小对文件进行分片(slice函数)，而后为文件生成一个hash对文件进行标注。在请求时先验证所上传的文件是否已经存在于服务器（若是则直接提示上传成功，即秒传功能），若不存在或部分存在则需要后端返回上传成功的分片标识数组，前端将使用成功分片数组与原文件分片数组进行处理得到未上传成功的分片，而后将未成功的分片以并发方式上传至后端。上传后即完成了整个文件的上传，向后端发送合并分片请求即完成大文件分片上传，断点续传功能。

7.19实现方式（即彻底完成功能）

步骤：

  1. 由于前端计算md5耗时过长，可能会导致页面卡死，因此考虑使用Web Worker来计算md5，即使用worker.js（使用spark-md5）文件来计算：分片数组，分片哈希数组，文件整体哈希。
  2. 在拿到web worker所得到的分片数组，分片哈希数组，文件整体哈希后，即可开始进行大文件上传工作，前端使用文件整体哈希、文件名以及分片数组作为请求参数调用后端/init接口初始化上传操作。【initSend函数】。
  3. 初始化操作完成后，前端使用文件整体哈希作为参数调用后端/status接口获取此文件分片的状态信息，前端根据后端所返回的状态信息使用filter以及every方法得到：文件是否已经上传的状态existFile、后端存在的文件分片existChunks。若existFile为true，则直接提示上传成功，即秒传功能。【verifyInfo函数】
  4. 若existFile为false，则使用后端返回的existChunks数组与分片数组进行对比，得到未上传成功的分片数组，并将其分片信息（分片哈希值，分片内容，分片序号以及文件整体哈希值）作为formData参数发送至后端/chunk接口（在发送分片时使用并发操作，并限制最大并发数为6）【uploadChunks函数】
  5. 当所有分片发送完成后，前端给后端以文件整体哈希做为参数调用后端/merge接口提示后端可以进行合并操作，后端返回成功消息即完成大文件分片上传，断点续传功能。【mergeFile函数】

演示图

  1. 选择文件：

  2. 秒传：

  3. 分片上传：

代码内容

在后续操作中，完成了对请求的封装以及分片上传的hook的编写，主处理逻辑部分仅仅为下方所示：

javascript 复制代码 
const submitUpload = () => {
    const file = FileInfo.value;
    if(!file) {
        return;
    }
    fileName.value = file.name;
    const { mainDeal } = useUpload(file, fileName.value)
    mainDeal()
}

api的封装为下方所示：

javascript 复制代码 
import request from "@/utils/request";

export async function initSend(uploadId, fileName, totalChunk) {
  return request({
    url: "/init",
    method: "POST",
    data: {
      uploadId,
      fileName,
      totalChunk,
    },
  });
}

export async function verifyInfo(uploadId) {
  return request({
    url: "/status",
    method: "POST",
    data: {
      uploadId,
    },
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
  });
}
export async function uploadSingle(formData) {
  return request({
    url: "/chunk",
    method: "POST",
    data: {
      formData,
    },
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
}
export async function mergeFile(uploadId) {
  return request({
    url: "/merge",
    method: "POST",
    data: {
      uploadId,
    },
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  });
}

useUpload钩子函数为：

javascript 复制代码 
import { ref } from "vue";
import axios from "axios";
import type { AxiosResponse } from "axios";
import {
  initSend,
  verifyInfo,
  mergeFile,
  uploadSingle,
} from "@/apis/uploadApi";
export function useUpload(fileInfo, filename) {
  const FileInfo = ref<File>(fileInfo);
  const fileName = ref(filename); // 文件名称
  const fileHash = ref(""); // 文件hash
  const fileHashArr = ref([]);
  const chunks = ref([]);

  interface Verify {
    id?: Number;
    uploadId?: String;
    chunkIndex?: Number;
    status?: String;
  }

  const mainDeal = async () => {
    const worker = new Worker(new URL("@/utils/worker.js", import.meta.url), {
      type: "module",
    });
    const file = FileInfo.value;
    console.log(worker);
    console.log("file_info", file);
    worker.postMessage({ file: file });
    worker.onmessage = async (e) => {
      const { data } = e;
      chunks.value = data.fileChunkList;
      fileHashArr.value = data.fileChunkHashList;
      fileHash.value = data.fileMd5;
      console.log("uploadid", fileHash.value);
      const res_init = await initSend(
        fileHash.value,
        fileName.value,
        chunks.value.length
      );
      console.log("res_init", res_init);

      const { existFile, existChunks } = await verify(fileHash.value);
      if (existFile) return;

      uploadChunks(chunks.value, existChunks, fileHashArr.value);
      worker.terminate();
    };
  };

  // 控制请求并发
  const concurRequest = (
    taskPool: Array<() => Promise<Response>>,
    max: number
  ): Promise<Array<Response | unknown>> => {
    return new Promise((resolve) => {
      if (taskPool.length === 0) {
        resolve([]);
        return;
      }
      console.log("taskPool", taskPool);
      const results: Array<Response | unknown> = [];
      let index = 0;
      let count = 0;
      console.log("results_before", results);

      const request = async () => {
        if (index === taskPool.length) return;
        const i = index;
        const task = taskPool[index];
        index++;
        try {
          results[i] = await task();
          console.log("results_try", results);
        } catch (err) {
          results[i] = err;
        } finally {
          count++;
          if (count === taskPool.length) {
            resolve(results);
          }
          request();
        }
      };

      const times = Math.min(max, taskPool.length);
      for (let i = 0; i < times; i++) {
        request();
      }
    });
  };

  // 合并分片请求
  const mergeRequest = async () => {
    return mergeFile(fileHash.value);
  };

  // 上传文件分片
  const uploadChunks = async (
    chunks: Array<Blob>,
    existChunks: Array<string>,
    md5Arr: Array<string>
  ) => {
    const formDatas = chunks
      .map((chunk, index) => ({
        fileHash: fileHash.value,
        chunkHash: fileHash.value + "-" + index,
        chunkIndex: index,
        checksum: md5Arr[index],
        chunk,
      }))
      .filter((item) => !existChunks.includes(item.chunkHash));
    console.log("formDatas", formDatas);
    const form_Datas = formDatas.map((item) => {
      console.log("!", item.chunkIndex);
      const formData = new FormData();
      formData.append("uploadId", item.fileHash);
      formData.append("chunkIndex", String(item.chunkIndex));
      formData.append("checksum", item.checksum);
      formData.append("file", item.chunk);
      return formData;
    });
    console.log("formDatas", form_Datas);
    const taskPool = form_Datas.map(
      (formData) => () =>
        fetch("http://10.184.131.57:8101/ferret/upload/chunk", {
          method: "POST",
          body: formData,
        })
    );
    //控制请求并发
    const response = await concurRequest(taskPool, 6);
    console.log("response", response);
    // 合并分片请求
    const res_merge = await mergeRequest();
    console.log("res_merge", res_merge);
  };

  // 校验文件、文件分片是否存在
  const verify = async (uploadId: string) => {
    const res = await verifyInfo(uploadId);
    const { data } = res.data;
    console.log("verify", res);
    // 看服务器是不是已经有文件所有信息
    const existFile = data.every((item: Verify) => item.status === "Uploaded");
    const existChunks: string[] = [];
    data.filter((item: Verify) => {
      if (item.status === "Uploaded") {
        existChunks.push(`${item.uploadId}-${item.chunkIndex}`);
      }
    });
    console.log("existFile", existFile, "existChunks", existChunks);
    return {
      existFile,
      existChunks,
    };
  };
  return {
    mainDeal,
  };
}

web worker实现方式：

javascript 复制代码 
import SparkMD5 from 'spark-md5';
let DefaultChunkSize = 1024 * 1024 * 5; // 5MB

self.onmessage = (e) => {
    console.log("!!>", e.data)

    if (e.data.file.size >= 1024 * 1024 * 100 && e.data.file.size < 1024 * 1024 * 512) {
        DefaultChunkSize = 1024 * 1024 * 10
    }else if (e.data.file.size >= 1024 * 1024 * 512) {
        DefaultChunkSize = 1024 * 1024 * 50
    }

    const { file, chunkSize = DefaultChunkSize } = e.data;
    let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
        chunks = Math.ceil(file.size / chunkSize),
        currentChunk = 0,
        spark = new SparkMD5.ArrayBuffer(),
        fileChunkHashList = [],
        fileChunkList = [],
        fileReader = new FileReader();

    loadNext();

    function loadNext() {
        let start = currentChunk * chunkSize,
            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

        let chunk = blobSlice.call(file, start, end);
        fileChunkList.push(chunk);
        fileReader.readAsArrayBuffer(chunk);
    }

    function getChunkHash(e) {
        const chunkSpark = new SparkMD5.ArrayBuffer();
        chunkSpark.append(e.target.result);
        fileChunkHashList.push(chunkSpark.end());
    }

    // 处理每一块的分片
    fileReader.onload = function (e) {
        spark.append(e.target.result);
        currentChunk++;

        getChunkHash(e)

        if (currentChunk < chunks) {
            loadNext();
        } else {
            // 计算完成后，返回结果
            self.postMessage({
                fileMd5: spark.end(),
                fileChunkList,
                fileChunkHashList,
            });
            fileReader.abort();
            fileReader = null;
        }
    }

    // 读取失败
    fileReader.onerror = function () {
        self.postMessage({
            error: 'wrong'
        });
    }
};
相关推荐
hj5914_前端新手21 分钟前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法25 分钟前
低代码编辑器项目设计与实现：以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku36 分钟前
都2025年了，我们还有必要为了兼容性，去写那么多polyfill吗？
前端·javascript·css
yangcode41 分钟前
iOS 苹果内购 Storekit 2
前端
LuckySusu42 分钟前
【js篇】JavaScript 原型修改 vs 重写：深入理解 constructor的指向问题
前端·javascript
LuckySusu42 分钟前
【js篇】如何准确获取对象自身的属性？hasOwnProperty深度解析
前端·javascript
LuckySusu1 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu1 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu1 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在1 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点03Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用0446个Nano-banana 精选提示词，持续更新中05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题08A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程09Spec-Kit 使用指南10KGG转MP3工具|非KGM文件|解密音频