菜鸟教程
教程 axios tutorial

文件上传下载示例

在前端项目中，文件上传与下载是常见需求，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 实现保存。

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

相关内容