# 大文件分片上传实战

URL: https://caijiao.org/axios/file-transfer/chunk-upload
Source: docs/axios/file-transfer/chunk-upload.md
Description: 本章节讲解如何使用 Axios 实现大文件分片上传，包括将文件拆分成小块、逐片上传、合并服务端和上传进度管理，适用于上传大文件时提高成功率和用户体验。

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

## 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` 可以保证顺序上传，也可使用并发上传策略提高速度；分片上传适合大文件、视频、图片压缩包等场景。