解决自定义 Antd Form 表单控件 获取值的问题

自定义表单时，经常会封装一些复杂的控件，像Upload这样的输入控件，不直接作为Form.Item的子元素的时候，值就会获取不到。

知识点一

value is not a valid prop, do you mean fileList?

React Ant Design Upload 组件在Form中使用的警告,如何排除:
警告信息 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?

解决方法:

当您在Form.Item中使用Upload时,可能遇到此类警告,解决该问题只需要在Form.Item组件的属性列表中添加如下两个属性即可:

valuePropName=“fileList”
getValueFromEvent={normFile}

具体代码：

const normFile = (e: any) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
        return e;
    }
    return e && e.fileList;
};
 
<Form.Item
    label="Banner图"
    name="banner"
    valuePropName="fileList"
    getValueFromEvent={normFile}
>
	<Upload
	    name="bannerUpload"
	    >
	        <Button icon={<UploadOutlined />}>上传图片</Button>
	</Upload>
</Form.Item>

知识点二
封装一个Upload组件

import { Form, Upload as AntdUpload } from "antd";
import { UploadChangeParam, UploadFile } from "antd/lib/upload";
import React, { memo, useState } from "react";

function UploadPicture() {
    const [loading, setLoading] = useState(false);
    const [url, setURL] = useState('');
    const handleChange = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            setURL("https://ipfs.io/ipfs/" + info.file.response.Hash);
        }
    };

    const uploadButton = (
        <div>
            {loading ? "loading..." : "+"}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );
    const normFile = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };
    return (
        <Form.Item
            label="url"
            name="imgUrl"
            valuePropName="fileList"
            getValueFromEvent={normFile}
            rules={[{ required: true }]}
        >
            <AntdUpload
                name="myfile"// 发到后台的文件参数名
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://..."//上传的地址
                onChange={handleChange}
            >
                {url ? <img src={url} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
            </AntdUpload>
        </Form.Item>

    )
}

const Upload = memo(UploadPicture);
export {
    Upload
}

在父组件中使用：

 const onFinish = (values: any) => {
        console.log('Success:', values);
        setURL("https://ipfs.io/ipfs/"+values.imgUrl[0].response.Hash);
    };
 <Form onFinish={onFinish}>
      <Upload />
 </Form>

知识点三
上传图片到ipfs
前端访问上传到ipfs的内容：通过http://ipfs.io/ipfs/hash值，查看文件内容

知识点1的参考地址：https://segmentfault.com/a/1190000041454265