ReactJS UI Ant Design 上传组件

Ant Design是一个基于React的UI组件库，其包括了众多基础组件和复合组件，其中之一便是上传组件。在Ant Design中，上传组件可以方便地实现文件上传功能，我们可以直接使用Ant Design提供的Upload组件来实现。

安装

使用npm进行安装：

npm install antd --save

使用

在项目中引入Ant Design的样式和上传组件：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Upload, Button, Icon } from 'antd';

我们可以通过以下代码实现一个上传组件：

class UploadComponent extends React.Component {
  render() {
    const props = {
      action: '//jsonplaceholder.typicode.com/posts/',
      onChange({ file, fileList }) {
        if (file.status !== 'uploading') {
          console.log(file, fileList);
        }
      },
      defaultFileList: [
        {
          uid: '1',
          name: 'xxx.png',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        },
        {
          uid: '2',
          name: 'yyy.png',
          status: 'done',
          url: 'http://www.baidu.com/yyy.png',
        },
        {
          uid: '3',
          name: 'zzz.png',
          status: 'error',
        },
      ],
    };

    return (
      <Upload {...props}>
        <Button>
          <Icon type="upload" /> Click to Upload
        </Button>
      </Upload>
    );
  }
}

参数说明

在上面的示例中，我们使用了以下参数：

• action：上传的URL地址。
• onChange：文件状态改变的回调函数。
• defaultFileList：默认的文件列表。

除此之外，还有一些常用的属性，如下所示：

• showUploadList：是否展示上传列表。
• beforeUpload：上传文件之前的回调函数。
• customRequest：自定义上传行为的回调函数。

完整的API参数说明请参考Ant Design官方文档。

Ant Design上传组件不仅提供了基本的上传功能，还可自定义上传行为，使用方便，非常适合React开发者进行文件上传业务的实现。