antdesignpro 表单组件里装图片的组件

Ant Design Pro 表单组件中有一个上传组件可以用来上传图片，它是基于 Ant Design 的 Upload 组件进行封装的，具体使用方法如下：

1. 首先需要在页面中引入 Upload 组件：

import { Upload } from 'antd';

2. 在表单中使用 Upload 组件，例如：

<Form.Item label="图片上传">
  <Upload
    name="avatar"
    listType="picture-card"
    className="avatar-uploader"
    showUploadList={false}
    action="/upload.do"
    beforeUpload={beforeUpload}
    onChange={this.handleChange}
  >
    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
  </Upload>
</Form.Item>

其中，`name` 表示上传的文件参数名称，`listType` 表示展示的样式（这里用的是图片卡片），`className` 表示自定义样式类名，`showUploadList` 表示是否展示已上传文件列表，`action` 表示上传的接口地址，`beforeUpload` 表示上传前的验证方法，`onChange` 表示上传状态变化的回调函数。

3. 在上传前进行验证，例如：

beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('只能上传JPG/PNG格式的图片!');
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('上传的图片必须小于2MB!');
    return false;
  }
  return true;
}

在这个示例中，我们对上传的图片进行了格式和大小的验证，如果不符合要求就会提示错误信息。

4. 在上传状态变化时更新图片展示，例如：

handleChange = info => {
  if (info.file.status === 'uploading') {
    this.setState({ loading: true });
    return;
  }
  if (info.file.status === 'done') {
    getBase64(info.file.originFileObj, imageUrl => {
      this.setState({
        imageUrl,
        loading: false,
      });
    });
  }
};

在这个示例中，我们根据上传的状态判断是否正在上传，如果是就显示加载中的状态，如果上传完成就将图片转换为 Base64 格式并展示出来。

上述是一个简单的上传图片组件的示例，你可以根据自己的需求进行调整和扩展。