如何在react admin中显示上传进度？

在React Admin中显示上传进度可以通过以下步骤实现：

首先，确保你已经安装了所需的依赖包。你需要安装react-dropzone和axios这两个包。你可以使用以下命令进行安装：

npm install react-dropzone axios

在你的React Admin项目中，创建一个新的组件来处理文件上传。你可以将其命名为FileUpload.js。在该组件中，导入所需的依赖包：

import React, { useState } from 'react';
import Dropzone from 'react-dropzone';
import axios from 'axios';

在FileUpload组件中，创建一个状态来跟踪上传进度。你可以使用useState钩子来实现：

const FileUpload = () => {
  const [progress, setProgress] = useState(0);
  // 其他代码
}

创建一个处理文件上传的函数。在该函数中，你可以使用axios库来发送文件到服务器，并通过onUploadProgress回调函数来获取上传进度：

const handleFileUpload = async (files) => {
  const formData = new FormData();
  formData.append('file', files[0]);

  try {
    const response = await axios.post('/upload', formData, {
      onUploadProgress: (progressEvent) => {
        const progress = Math.round(
          (progressEvent.loaded / progressEvent.total) * 100
        );
        setProgress(progress);
      },
    });

    console.log(response.data); // 处理上传成功后的响应
  } catch (error) {
    console.error(error); // 处理上传失败的错误
  }
};

在FileUpload组件中，使用Dropzone组件来创建一个拖放区域，允许用户选择文件并触发上传函数：

const FileUpload = () => {
  // 状态和函数定义

  return (
    <div>
      <Dropzone onDrop={handleFileUpload}>
        {({ getRootProps, getInputProps }) => (
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>将文件拖放到此处，或点击选择文件</p>
          </div>
        )}
      </Dropzone>
      <progress value={progress} max="100" />
    </div>
  );
};