UploadButton

对 ProFormUploadButton 进行封装，在其基础上优化了以下功能：

• 优化 upload 组件的传参，支持直接传入 path 或者 path[]，如 'https://xxxx.jpg' 或 ['https://xxxx.jpg']
• 兼容文件裁剪组件 antd-img-crop
• 支持指定文件上传的 category
• 支持限制文件大小
• 支持单文件/多文件上传

新增以下参数：

• maxSize (number, 可选): 文件尺寸，单位为兆（M）
• categoryId (string, 可选): 知晓云文件的 categoryId
• multiple (boolean, 可选): 是否启用多文件上传，默认只支持上传单文件
• shouldCropImage ((file: object, fileList: object[]) => boolean, 可选): 根据该函数返回判断是否执行图片裁剪。需接入 antd-img-crop 组件，可见下方示例

其余参数均与 ProFormUploadButton 一致

TIP

如果接入了 antd-img-crop，顶层 props 的 beforeUpload 会被 antd-img-crop 代理，对上传动作进行拦截，禁止在此覆盖 beforeUpload

有需要传入 beforeUpload 的场景，需在 fieldProps 内定义 beforeUpload

example

作为 FormItem 使用

function Component() {
  return (
    <ProForm gutter={20}>
      <UploadButton
        colProps={{span: 12}}
        fieldProps={{listType: 'picture-card', accept: 'image/*'}}
        label="背景图片"
        labelCol={{span: 24}}
        name="background_image"
      />
    </ProForm>
  )
}

图片上传前进行裁剪

import ImageCrop from 'antd-img-crop'

function Page() {
  return (
    <ImageCrop showGrid modalTitle="裁剪图片">
      <UploadButton
        colProps={{span: 12}}
        fieldProps={{listType: 'picture-card', accept: 'image/*'}}
        label="背景图片"
        labelCol={{span: 24}}
        name="background_image"
      />
    </ImageCrop>
  )
}