前端大文件分片上传

/**
 * @description: 选择上传文件
 * @param file el-upload 返回的参数
 */
const handleFileUpload = async (index, i, type, item, file) => {
  // 如果文件合法，则进行分片上传
  if (await checkMirrorFile(item, file)) {
    // 文件信息
    const files = file.file;
    // 从 0 开始的切片
    const shardIndex = 0;
    item.progress = 0;
    // 调用 文件切片 方法
    uploadFileSilce(files, shardIndex, item);
    // 文件非法，则进行提示
  }
};
// 校验文件格式和大小函数函数
const checkMirrorFile = async (item, file) => {
  // 校验文件格式，支持.zip/.tar
  const fileType = file.file.name.split(".");
  if (item.ext.indexOf(fileType[fileType.length - 1]) == -1) {
    ElMessage.warning("文件格式错误");
    item._value.pop();
    return false;
  }
  // 校验文件大小
  const fileSize = file.file.size;
  // 文件大小是否超出 2G
  if (fileSize > item.size * 1024 * 1024) {
    ElMessage.warning("上传文件大小不能超过" + item.size + "M");
    item._value.pop();
    return false;
  }
  return true;
};
/**
 * @description: 分片函数
 * @param file 文件
 * @param shardIndex 分片数量
 */
const uploadFileSilce = (file, shardIndex, item) => {
  // 文件名
  const { name } = file;
  // 文件大小
  const { size } = file;
  // 分片大小 5M
  const shardSize = 1024 * 1024 * 5;
  // 分片总数
  const shardTotal = Math.ceil(size / shardSize);
  // 文件开始结束的位置
  const start = shardIndex * shardSize;
  const end = Math.min(start + shardSize, size);
  // 开始切割
  const packet = file.slice(start, end);

  // 拼接请求参数
  const formData = new FormData();
  formData.append("file", packet);
  formData.append("type", "file");
  formData.append("plan_uuid", data.plan_uuid);
  formData.append("name", name);
  formData.append("chunk", shardIndex + 1);
  formData.append("chunks", shardTotal);
  // 如果 当前分片索引 小于 总分片数
  if (shardIndex < shardTotal) {
    // 进度条保留两位小数展示
    item.progress = Number(((shardIndex / shardTotal) * 100).toFixed(2)) * 1;
    // 调用文件上传接口
    reqBlobUpload(formData)
      .then((res) => {
        if (res.status == 1) {
          ElMessage({
            type: "success",
            message: "上传成功",
          });
          item._value[item._value.length - 1].url = res.url;
          item._value[item._value.length - 1].path = res.path;
          item.value.push(res.path);
          item.progress = 0;
          return;
        }
        if (res.status == 0) {
          shardIndex++;
          // 递归调用 分片函数
          uploadFileSilce(file, shardIndex, item);
        }
      })
      .catch((err) => {
        item._value.pop();
      });
  }
};