axios 中的文件上传进度条 - Javascript

在处理文件上传时，进度条是一个很常见的需求。在使用 axios 进行文件上传时，可以通过监听 uploadEventHandlers 中的 progress 事件来获取上传进度，并使用进度条来展示上传过程。

引入 axios

首先，我们需要安装和引入 axios。

// 使用 npm 安装
npm install axios

// 在代码中引入 axios
import axios from 'axios';

文件上传

使用 axios 进行文件上传时，向服务器发送的请求可以使用 FormData 对象。我们可以通过创建 FormData 对象，并添加文件到其中来构建上传请求。

// 创建 FormData 对象，并添加文件
const formData = new FormData();
formData.append('file', file);

// 发送文件上传请求
axios.post('/upload', formData, {
  // 配置 axios 发送请求时的 headers
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  // 配置上传进度事件处理器
  onUploadProgress: progressEvent => {
    const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    // 更新进度条状态
    updateProgress(progress);
  },
})
  .then(response => {
    // 处理上传成功的响应
    console.log(response.data);
    // 其他操作...
  })
  .catch(error => {
    // 处理上传失败的错误
    console.error(error);
    // 其他操作...
  });

进度条展示

为了展示文件上传的进度，我们可以使用一些库或自定义实现一个进度条组件。这个组件可以接受进度条的当前状态作为输入，并将其展示为一个具有动态变化效果的进度条。

下面是一个简单的 React 进度条组件示例：

import React from 'react';

const ProgressBar = ({ progress }) => {
  const progressStyle = {
    width: `${progress}%`,
  };

  return (
    <div className="progress-bar">
      <div className="progress-inner" style={progressStyle} />
    </div>
  );
};

export default ProgressBar;

你可以使用这个进度条组件来展示文件上传的进度。

参考资料

• axios 官方文档
• FormData MDN 文档
• React 进度条组件的例子