菜鸟教程
教程 axios tutorial

大文件分片上传实战

在前端项目中上传大文件（如视频或压缩包）时，直接上传容易失败或者网络中断。通过分片上传可以提高成功率并支持断点续传。

1. 将文件切片

javascript 
const file = document.getElementById("fileInput").files[0];
const chunkSize = 2 * 1024 * 1024; // 2MB 每片
const chunks = Math.ceil(file.size / chunkSize);

2. 使用 Axios 上传每一片

javascript 
import axios from "axios";

async function uploadFile(file) {
  const chunkSize = 2 * 1024 * 1024; // 2MB
  const chunks = Math.ceil(file.size / chunkSize);

  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(file.size, start + chunkSize);
    const formData = new FormData();
    formData.append("file", file.slice(start, end));
    formData.append("chunkIndex", i);
    formData.append("totalChunks", chunks);

    await axios.post("/upload/chunk", formData, {
      onUploadProgress: (e) => {
        const percent = Math.round(((i + e.loaded / e.total) / chunks) * 100);
        console.log(`上传进度：${percent}%`);
      },
    });
  }
}

3. 服务端合并文件

  • 服务端根据每片索引和总片数，按顺序合并文件。
  • 前端只需上传完所有分片后触发合并接口：
javascript 
await axios.post("/upload/merge", { fileName: file.name });

4. 优势

  • 提高稳定性：网络中断只需重传失败的分片；
  • 支持大文件：突破浏览器或服务器单次上传限制；
  • 进度管理清晰：可显示整个文件上传进度。

💡 小提示：结合 async/await 可以保证顺序上传，也可使用并发上传策略提高速度；分片上传适合大文件、视频、图片压缩包等场景。

相关内容