父组件模板：

import UploadComponent from "./component";

 <Col span={24}>
                <Form.Item
                  className={styles.uploadImgItem}
                  label="Image"
                  name="uploadPhoto"//用了预览的组件,手动绑定图片路径,NONO！
                  rules={rulesObj.Image}
                >
                  <UploadComponent />//这个是上传图片的组件！
                </Form.Item>
              </Col>

上传图片的重要组件：

import React, { useState, useEffect } from "react";
import { Upload, Modal, message } from 'antd';
import { requestUrl, getUploadFileType, MessageError, MessageSuccess } from '../../../../utils/utils';
import { v4 as uuidv4 } from 'uuid';
import { PlusOutlined } from "@ant-design/icons";
import styles from "./index.less";
export default (props) => {
    const [fileList, setFileList] = useState([])
    const [previewVisible, setPreviewVisible] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    useEffect(() => {
        if (props.value) {
            let newFileList = props.value.map((item, index) => {
                return {
                    uid: item.id,
                    id: item.id,
                    url: item.url,
                }
            })
            setFileList(newFileList)//把每一个返回回来的 图片item 处理好后 放入DileList
        }

    }, [props])

    const handleChange = ({ file, fileList }) => {
        fileList = fileList.map((file) => {
            if (file.response) {
                const { response } = file
                file.uid = response.DocumentId;
                file.id = response.DocumentId;
                file.url = `${ATTACHMENT_URL}${response.UploadPath}`//预览
            }
            return file;
        });
        if (file.status !== undefined) {
            if (file.status === 'done') {
                console.log('上传成功')
                // console.log(fileList);
                triggerChange(fileList);
            } else if (file.status === 'error') {
                console.log('上传失败')
            } else if (file.status === 'removed') {
                if (typeof file.uid === 'number') {
                    //请求接口，删除已经保存过的图片，并且成功之后triggerChange
                    triggerChange(fileList);
                } else {
                    //只是上传到了服务器，并没有保存，直接riggerChange
                    triggerChange(fileList);
                }
            }
        }
        setFileList([...fileList]);
    }
    const triggerChange = (value) => {
        const onChange = props.onChange;
        if (onChange) {
            onChange(value);//将改变的值 传给父组件
        }
    };
   
    const uploadButton = (
        <div>
            <PlusOutlined />
            <div className="ant-upload-text">Upload</div>
        </div>
    );

    const uploadImages = {
        action: requestUrl + '/api/common/CommonUpload',
        headers: {
            SessionKey: `${localStorage.getItem('sk')}`,
        },
        accept:".jpeg,.png,.jpg",
        listType:"picture-card",
        data: (file) => {
            return {
                UploadType: 1027,//后端定义的type
                Id: uuidv4(),
                FileType: getUploadFileType(file),
            };
        },
        beforeUpload: (file) => {// 礼品image
            const limitFileNameLen = 100;
            return new Promise((resolve, reject) => {
                if (file.name && file.name.length > limitFileNameLen) {
                    message.error('Please upload a file with a file name less than 100 characters');
                    //请上传文件名不超过100个字符的文件
                    return Promise.reject();
                }
                const limitM = 2;
                const isLimit = file.size / 1024 / 1024 <= limitM;
                console.log(isLimit);
                if (!isLimit) {
                    message.error('The size exceeds the limit');
                    return Promise.reject();
                }
                return resolve();
            });
        },
         onPreview :(file) => {
            setPreviewImage(file.url);
            setPreviewVisible(true);
        }
    }

    return (
        <div
            className={styles.box}
        >
            <Upload
                {...uploadImages}
                fileList={fileList}
                onChange={handleChange}
            >
                {fileList.length >= 4 ? null : uploadButton}
            </Upload>
            <Modal
                visible={previewVisible}
                title='preview'
                footer={null}
                onCancel={() => setPreviewVisible(false)}
            >
                <img alt="Network fault" style={{ width: '100%' }} src={previewImage} />
            </Modal>
            <span >
                建议尺寸750*350，支持jpg/jpeg、png格式图片,小于2M
            </span>
        </div>
    );
};