antd 上传进度_ant design中upload组件上传大文件,显示进度条进度的实例

Ant Design中的Upload组件可以通过设置`showUploadList`属性为`false`，然后使用自定义的进度条组件来实现上传进度的显示。

以下是一个上传大文件并显示进度条进度的示例代码：

import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import React, { useState } from 'react';

const UploadProgress = ({ percent }) => (
  <div style={{ margin: '10px 0' }}>
    <div style={{ width: `${percent}%`, height: '5px', backgroundColor: '#1890ff' }}></div>
  </div>
);

const Demo = () => {
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);

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

    setUploading(true);

    // 模拟上传进度
    const timer = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress >= 100) {
          clearInterval(timer);
          setUploading(false);
          return 100;
        } else {
          return prevProgress + 10;
        }
      });
    }, 500);

    // 发送上传请求
    // axios.post('/api/upload', formData)
    //   .then(() => {
    //     clearInterval(timer);
    //     setUploading(false);
    //   })
    //   .catch(() => {
    //     clearInterval(timer);
    //     setUploading(false);
    //   });
  };

  return (
    <Upload
      name="file"
      action="/api/upload"
      showUploadList={false}
      beforeUpload={() => false}
      onChange={() => {}}
      customRequest={handleUpload}
    >
      <Button icon={<UploadOutlined />} disabled={uploading}>
        {uploading ? '上传中' : '点击上传'}
      </Button>
      {uploading && <UploadProgress percent={progress} />}
    </Upload>
  );
};

export default Demo;

这段代码中，我们定义了一个`UploadProgress`组件作为自定义的进度条组件，它接受一个`percent`属性用来表示上传进度的百分比。在`handleUpload`函数中，我们使用`setInterval`模拟上传进度，并使用`setProgress`函数更新上传进度。当上传进度达到100时，我们清除定时器并将`uploading`状态设置为`false`，表示上传完成。在`Upload`组件中，我们将`showUploadList`属性设置为`false`，禁用默认的上传列表，然后使用自定义的按钮和进度条组件来替代默认的上传按钮和上传进度条。