# 文件上传下载示例

URL: https://caijiao.org/axios/snippets/file-transfer
Source: docs/axios/snippets/file-transfer.md
Description: 本章节演示如何使用 Axios 实现文件上传与下载功能，包括普通文件上传、FormData 表单上传、上传进度监听、大文件分片上传，以及文件下载与保存示例，帮助前端开发者快速实现文件传输功能并优化用户体验。

在前端项目中，文件上传与下载是常见需求，Axios 提供了灵活的方式处理各种场景。

## 一、普通文件上传

```js
const fileInput = document.querySelector('#file');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/api/upload', formData)
  .then(res => console.log('上传成功', res.data))
  .catch(err => console.error('上传失败', err));
```

## 二、上传进度监听

```js
axios.post('/api/upload', formData, {
  onUploadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度: ${percent}%`);
  }
});
```

## 三、大文件分片上传

```js
async function uploadChunk(file) {
  const chunkSize = 1024 * 1024; // 1MB
  const chunks = Math.ceil(file.size / chunkSize);

  for (let i = 0; i < chunks; i++) {
    const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
    const formData = new FormData();
    formData.append('fileChunk', chunk);
    await axios.post('/api/upload-chunk', formData);
    console.log(`第 ${i + 1} 块上传完成`);
  }
}
```

## 四、文件下载与保存

```js
axios.get('/api/download/report.pdf', { responseType: 'blob' })
  .then(res => {
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'report.pdf');
    document.body.appendChild(link);
    link.click();
    link.remove();
  });
```

## 五、小结

* 使用 FormData 可上传单个或多个文件。
* 上传进度可通过 `onUploadProgress` 获取，提高用户体验。
* 大文件可分片上传，减少失败重传风险。
* 下载文件时设置 `responseType: 'blob'` 并创建 URL 实现保存。

这些示例可作为前端文件传输功能的基础模板，便于在项目中快速复用。