前端如何实现大文件上传

**### 📦 一、基础技术实现

1. 文件分片（切片上传）
   • 将大文件按固定大小（如 2MB/片）切割为多个 Blob 分片，通过 file.slice() 实现。
   • 优势：避免单次请求超时，支持断点续传。
2. 并发控制与异步上传
   • 使用 Promise.all 控制并发，避免浏览器请求阻塞。
   • 关键点：上传失败需自动重试。

代码实现

<template>
  <input type="file" id="input"/>
  <button id="uploadBtn">切片上传</button>
</template>

<script lang="ts" setup>
import axios from "axios";
import {onMounted} from "vue";

function uploadChunk(chunk:any) {
  const formData = new FormData();
  formData.append('file', chunk);

  //这里的地址可以替换为你的后端地址
  return axios('http://localhost:3000/bigFileUpload/api/upload', {
    method: 'POST',
    data: formData
  })
}

onMounted(()=>{
  // 获取元素并添加类型断言
  const uploadBtn = document.getElementById('uploadBtn') as HTMLButtonElement | null;
  if(uploadBtn) {
    uploadBtn.addEventListener('click',  function() {
      const input = document.getElementById('input') as HTMLInputElement | null;
      if(input && input.files) {
        const file = input.files[0];
        const chunksData = []
        const chunkSize = 2048 * 1024; // 2MB
        const chunksTotal = Math.ceil(file.size / chunkSize);

        for (let i = 0; i < chunksTotal; i++) {
          const startIndex = i * chunkSize;
          const endIndex = Math.min(startIndex + chunkSize, file.size);
          const chunk = file.slice(startIndex, endIndex);
          //将全部切片push到chunksData中
          chunksData.push(uploadChunk(chunk))
        }

        // 将所有切片并发传给后端
        Promise.all(chunksData)
      }
    });
  }
})
</script>