ProComponent搭建Upload表单

背景

利用ProComponent，创建一个能够上传文件的表单。

一开始打算使用<BetaSchemaForm/>进行构建，但是columns中valueType不支持Upload组件，因此无法实现

所以需要利用ProForm进行构建

 

做法

因为是弹窗表单，所以需要<ModalForm></ModalForm>

<ModalForm
  formRef={formRef}
  layout={'horizontal'}
  open={visible}
  onOpenChange={setVisible}
  title={record ? '编辑广告' : '新增广告'}
  onFinish={onSave}
>
  <ProFormUploadButton
    label="视频文件"
    name="file"
    listType="picture-card"
    icon={<PlusOutlined />}
    required={true}
    fileList={fileList}
    fieldProps={{
      multiple: true,
      onRemove: onVideoRemove,
      customRequest: uploadFile,
    }}
  />
</ModalForm>

• 利用ProFormUploadButton，建立文件上传组件
• 此处我们需要自定义上传，因此需要重写组件的上传方式，通过配置customerRequest

• //配置该函数后，后覆盖默认的上传方式，改用当前上传方式
  //customerRequest会传入一options对象，里面有当前的file，成功回调，失败回调，上传进度等，通过获取相关属性进行业务开发
  const uploadFile = async (options: any) => {
    const { file, onSuccess, onError } = options
    try {
      const uploadedFile = await uploadAdvertFile({
        multipartFile: file,
      })
      if (uploadedFile) {
        onSuccess(uploadedFile)
        setFileList([
          uploadedFile as any,
          ...fileList
        ])
      }
    } catch (error) {
      onError(error)
    }
  }

   

•  

   注意，如果需要手动上传，但是又要显示上传进度，就不能按照文档配置beforeUpload属性

• 文档说：如果需要手动上传，配置beforeUpload，传入一个return false的方法，这样会导致上传进度无法显示
• 因此无需更改beforeUpload，直接配置customerRequest即可