Axios 实现文件上传进度条、文件下载及下载进度监听

2023-12-09 23:10:36

如今，文件传输的需求已变得日益普遍。以文件上传为例，人们需要将本地文件上传至服务器。而文件下载则是指将服务器文件下载至本地。为了优化用户体验，服务器与客户端之间常引入进度条机制，实时反馈文件上传或下载的进度。

文件上传进度条：

const onUploadProgress = (progressEvent) => {
  // 计算上传进度
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  
  // 更新进度条UI
  setProgress(percentage);
};

axios.post('/upload', data, {
  onUploadProgress,
})
.then((response) => {
  // 上传成功
})
.catch((error) => {
  // 上传失败
});

文件下载进度条：

const onDownloadProgress = (progressEvent) => {
  // 计算下载进度
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  
  // 更新进度条UI
  setProgress(percentage);
};

axios({
  url: '/download',
  method: 'GET',
  responseType: 'blob', // 确保以二进制流方式下载文件
  onDownloadProgress,
})
.then((response) => {
  // 下载成功
  const blob = response.data;
  // 利用blob构建文件链接
  const url = window.URL.createObjectURL(blob);
  
  // 创建一个<a>标签，并将href属性设置为下载文件的链接
  const link = document.createElement('a');
  link.href = url;
  link.download = 'filename.ext';
  
  // 将<a>标签添加到文档中
  document.body.appendChild(link);
  
  // 点击该<a>标签，开始下载文件
  link.click();
})
.catch((error) => {
  // 下载失败
});