使用Axios和React显示多个文件的上传进度

Axios是一种基于Promise的HTTP客户端，用于向服务器发送HTTP请求。它可以在前端开发中与React一起使用，来实现多个文件的上传进度显示。

多个文件的上传进度显示是一个常见的需求，可以通过以下步骤实现：

在React组件中引入Axios库和React的useState钩子函数。

import React, { useState } from 'react';
import axios from 'axios';

创建一个处理文件上传的函数，并在该函数中使用Axios发送文件上传请求。

const uploadFiles = (files) => {
  const formData = new FormData();
  files.forEach((file) => {
    formData.append('files', file);
  });

  axios.post('/upload', formData, {
    onUploadProgress: (progressEvent) => {
      const progress = Math.round(
        (progressEvent.loaded / progressEvent.total) * 100
      );
      // 更新进度条
      setProgress(progress);
    }
  }).then((response) => {
    // 文件上传成功后的处理逻辑
    console.log(response.data);
  }).catch((error) => {
    // 文件上传失败后的处理逻辑
    console.error(error);
  });
};

在上述代码中，我们创建了一个FormData对象来存储要上传的文件。然后使用forEach循环将每个文件添加到FormData中。接下来，我们使用Axios的post方法发送文件上传请求，并在配置项中使用了onUploadProgress回调函数来获取上传进度。通过计算已上传数据的比例，我们更新进度条的值。

在React组件中使用useState来管理进度条的状态。

const [progress, setProgress] = useState(0);

在上述代码中，我们使用useState钩子函数创建了一个名为progress的状态变量，并将其初始值设为0。通过调用setProgress函数，可以更新该变量的值。

在组件的JSX中添加文件上传表单和进度条。

return (
  <div>
    <input type="file" multiple onChange={(e) => uploadFiles(e.target.files)} />
    <progress value={progress} max="100" />
  </div>
);

在上述代码中，我们使用input元素创建了一个文件上传表单，并通过onChange事件监听文件的选择。当用户选择文件后，触发uploadFiles函数进行文件上传。同时，我们使用progress元素创建了一个进度条，其值为progress状态变量的值。

至此，我们通过使用Axios和React实现了多个文件的上传进度显示。当用户选择文件后，进度条将实时显示文件上传的进度。

腾讯云相关产品和产品介绍链接地址：