实现ProFormUploadButton和Upload组件回显的办法

应用场景

实现Ant Design Pro表单中编辑功能的文件回显。

在开发基于Ant Design Pro的React应用时，我们经常需要在表单中集成文件上传功能。Ant Design Pro提供了`ProFormUploadButton`与`Upload`组件，它们是处理文件和图片上传的强大工具。然而，一个常见的挑战是在编辑模式下，如何优雅地回显之前上传的文件URL，以便用户能直观地看到已添加的文件或图片，并进行修改。

目标功能

本文旨在详细介绍如何在使用`ProFormUploadButton`和`Upload`组件的表单中，实现在编辑场景下自动加载和展示之前上传的文件URL。这一功能对于增强用户体验、简化编辑流程至关重要。

实现步骤

ProFormUploadButton

1.设置组件属性

<ProFormUploadButton
    name="file"
    max={1}
    rules={[{ required: true, message: '请上传章节' }]}
    disabled={radio === undefined ? true : false}
    accept={
            (
              formRef.current?.getFieldValue('coursewareTypeId')
                ? formRef.current?.getFieldValue('coursewareTypeId') == 2
                : current?.coursewareTypeId == 2
            )
              ? 'video/*'
              : '.ppt,.pptx'
          }
    tooltip={addOrUpdate === 'add' ? '' : '如需修改，请重新上传！'}
    fieldProps={{
        //上传进度条
        progress: {
            strokeColor: {
                '0%': 'red',
                '100%': 'blue'
            },
            strokeWidth: 3,
            format: (percent) => percent && `${parseFloat(percent.toFixed(2))}%`,
        },
        //自定义上传接口
        customRequest: async (info: any) => {
            const formData = new FormData();
            formData.append('file', info.file);
            formData.append('type', "1");//1是文档
            try {
                const { success, data } = await minio_upload(formData);
                if (success) {
                    info.onSuccess(info.file);
                    setMinioUrl(data);
                    return success;
                } else {
                        message.error('上传失败，请刷新重试');
                        return false;
                       }
             } catch (error) {
                    message.error('上传失败，请刷新重试');
                    return false;
                  }
        },
        //实现预览
        onPreview: (file: any) => { window.open(file?.url, '_blank') }
    }}
    />

2.设置组件回显值

useEffect(()=>{
    //使用Form表单的formRef设置初始值
    formRef?.current?.setFieldsValue({
        file:[
              {
                url: record?.url,//设置后，组件的onProview属性才能生效
                uid: '-1',
                name: record?.chapterName,
                //设置缩略图图片，若不设置，则回显时图片为空
                thumbUrl: require("../../../../../../public/images/learnblue.png")
              }
             ]
        })
},[])

Upload

1.设置组件属性

//1.页面布局
<Col span={8}>
//ProFormSwitch控制是否展示Upload组件
    <ProFormSwitch
        name="homeState"
        label="是否首页"
        fieldProps={{
            checkedChildren: "是",
            unCheckedChildren: "否",
            defaultChecked: false,
            onChange: () => {
                setFileList([])
            }
        }}
    />
</Col>
              
<Col span={8}>
//使用ProFormDependency实现表单项间的依赖
    <ProFormDependency name={['homeState']}>
        {({ homeState }) => {
            return homeState ?
                        <Row>
                            <Col span={1} />
                            <Col span={11}>首页图片：</Col>
                            <Col span={12}>
                                <Upload
                                    {...uploadProps}//设置上传属性
                                    name="homeImg"
                                    maxCount={1}
                                    listType="picture-card"
                                    fileList={fileList}//设置回显列表
                                    onChange={onChange}
                                    onPreview={onPreview}
                                >
                                    //Upload文字提示
                                    {fileList.length < 1 && '+ 点击上传'}
                                </Upload>
                            </Col>
                        </Row> : ''
        }}
    </ProFormDependency>
</Col>

//2.函数部分
//上传属性
const uploadProps = {
    accept: '.jpg,.jpeg.,.png',
    customRequest: async (info: any) => {
        const formData = new FormData();
        formData.append('file', info.file);
        try {
            const { success, data } = await upload_homeImg(formData);
            if (success) {
              info.onSuccess(info.file);
              setHomeImg(data);//上传接口返回的数据存在homeImg状态中
              return success;
            } else {
                  message.error('上传失败，请刷新重试');
                  return false;
              }
        } catch (error) {
            message.error('上传失败，请刷新重试');
            return false;
          }
    },
    onPreview: () => { }
}

const onChange = (res: any) => {
    setFileList(res?.fileList?.map((e: any) => (
        { ...e, url:e.response?.data?.downloadUrl })));
};

2.设置组件回显值

//自定义函数，函数体实现改变fileList状态值
//使用函数的目的是解决setFileList()的异步情况，使得fileList的值总是最新的
const funcSetFileList = (homeImg: any) => {
    setFileList([
        {
          url: homepageImgPre + `${homeImg}`,
          uid: '-1',
          name: 'homeImg.png',
        }
    ])
}