大文件切片上传

需求：对于比较大的文件一次性上传对服务器压力比较大，所以需要切片上传

思路：可以固定切片大小（每个小文件的大小）然后分段上传，也可以固定切片数量（然后计算每个切片大小进行上传）

<template>
  <el-upload
    action
    drag
    :auto-upload="false"
    :show-file-list="false"
    :on-change="handleChange"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将文件拖到此处，或
      <em>点击上传</em>
    </div>
    <div class="el-upload__tip" slot="tip">
      支持扩展名：pdf.doc.pptx.mp4.mp3,视频大小5G以内
      <div class="file_info" v-if="percent">
        <div class="ellipsis-one">{{ filename }}</div>
        <el-progress :percentage="Math.ceil(percent)"></el-progress>
      </div>
    </div>
  </el-upload>
</template>

<script>
import axios from "axios";
import SparkMD5 from "spark-md5";

export default {
  inheritAttrs: false, // 不继承父组件非 props 属性,如 class style
  data() {
    return {
      action: `${process.env.VUE_APP_API_PATH}/api/services/app/FileUpLoadService/FileUploadSingle`,
      percent: 0, // 总进度
      percentCount: 0, // 进度值
      isSuspend: true, // 是否暂停
      filename: "", // 文件名
    };
  },
  methods: {
    // * 处理文件变化
    async handleChange(file) {
      if (!file) return;
      this.$message.info("正在分析文件中...");
      this.filename = file.name;
      this.percent = 0;
      this.percentCount = 0;
      // 获取文件并转成 ArrayBuffer 对象
      const fileObj = file.raw;
      let buffer;
      try {
        buffer = await this.fileToBuffer(fileObj);
      } catch (error) {
        console.log("🚀 ~ handleChange ~ error:", error);
      }
      // 将文件按固定大小（5M）进行切片，注意此处同时声明了多个常量
      const chunkSize = 5 * 1024 * 1024,
        chunkList = [], // 保存所有切片的数组
        chunkListLength = Math.ceil(fileObj.size / chunkSize), // 计算总共多个切片
        suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1]; // 文件后缀名

      // 根据文件内容生成 hash 值
      const spark = new SparkMD5.ArrayBuffer();
      spark.append(buffer);
      const hash = spark.end();

      // 生成切片，这里后端要求传递的参数为字节数据块（chunk）和每个数据块的文件名（fileName）
      let startPos = 0; // 切片时的初始位置
      for (let i = 0; i < chunkListLength; i++) {
        const item = {
          chunk: fileObj.slice(startPos, startPos + chunkSize),
          fileName: `${hash}_${i}.${suffix}`, // 文件名规则按照 hash_1.jpg 命名
        };
        startPos += chunkSize;
        chunkList.push(item);
      }
      this.chunkList = chunkList; // sendRequest 要用到
      this.hash = hash; // sendRequest 要用到
      this.sendRequest();
    },
    // * 发送切片
    async sendChunks(formData, index) {
      await axios({
        url: "http://127.0.0.1:3000/upload/bigFiles",
        method: "post",
        headers: { "Content-Type": "multipart/form-data", token: this.headers.token },
        data: formData,
      });
      // 成功
      if (this.percentCount === 0) {
        // 避免上传成功后会删除切片改变 chunkList 的长度影响到 percentCount 的值
        this.percentCount = 100 / this.chunkList.length;
      }
      this.percent += this.percentCount; // 改变进度
      this.chunkList.splice(index, 1); // 一旦上传成功就删除这一个 chunk，方便断点续传
    },
    // * 发送请求
    sendRequest() {
      const requestList = []; // 请求集合
      this.chunkList.forEach((item, index) => {
        const fn = () => {
          const formData = new FormData();
          formData.set("name", item.fileName);
          formData.append("chunks", item.chunk);
          return this.sendChunks(formData, index);
        };
        requestList.push(fn);
      });
      let i = 0; // 记录发送的请求个数
      // 文件切片全部发送完毕后，需要请求 '/merge' 接口，把文件的 hash 传递给服务器
      const complete = async () => {
        const result = await axios({
          url: "http://127.0.0.1:3000/upload/merge",
          method: "get",
          headers: { token: this.headers.token },
          params: { hash: this.hash },
        });
        this.$message.success("上传成功");
        console.log("上传成功--临时访问路径", result.data.data.url);
      };
      const send = async () => {
        if (!this.isSuspend) return;
        if (i >= requestList.length) {
          return complete(); // 发送完毕
        }
        await requestList[i]();
        i++;
        send();
      };
      send(); // 发送请求
    },
    // * 按下暂停按钮
    handleClickBtn() {
      this.isSuspend = !this.isSuspend;
      // 如果不暂停则继续上传
      if (this.isSuspend) this.sendRequest();
    },
    // * 将 File 对象转为 ArrayBuffer
    fileToBuffer(file) {
      return new Promise((resolve, reject) => {
        const fr = new FileReader();
        fr.onload = event => {
          resolve(event.target.result);
        };
        fr.readAsArrayBuffer(file);
        fr.onerror = event => {
          reject(new Error("转换文件格式发生错误-->" + event.target.error));
        };
      });
    },
  },
  computed: {
    headers() {
      return {
        Authorization: `Bearer ${this.$store.state.user.session.accessToken}`,
        // 自己的token 测试大文件上传
        token:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuaWNrbmFtZSI6InBhbmdodSIsInBhc3N3b3JkIjoiMTIzNDU2IiwiaWF0IjoxNzA1NzU3Njk3LCJleHAiOjE3MDU4MDA4OTd9.JdNbM7Hed31opf2Ktagudy1FkGRh7jTIcIYedXJ_43U",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";
.file_info {
  margin-top: 7px;
  max-width: 360px;
}
.ellipsis-one {
  @include ellipsis-one;
}
</style>

这里使用的是固定切片大小（5Mb），计算出切片数量进行上传