antd design(4.x)中Upload應用------編輯縮略圖

import React, { useState, useEffect } from 'react';
import style from './index.less';
import { EditOutlined, SettingTwoTone, PlusOutlined } from '@ant-design/icons';
import defaultImg from './img/default.png';
import Common from '@/utils/common';
import { getDataById, updateData, setDataProtect } from '@/services/resource';
import { Modal, notification, Upload } from 'antd';

const DetailUI = props => {
    const [dataId, setDataId] = useState(undefined);
    const [refresh, setRefresh] = useState(false);
    const [thumbVisible, setThumbVisible] = useState(false);//編輯縮略圖彈窗的visible
    const [sourceInfo, setSourceInfo] = useState(null);
    const [previewVisible, setPreviewVisible] = useState(false);//預覽彈窗的visible
    const [previewImage, setPreviewImage] = useState('');//預覽image的內容
    //存放默認的圖片路徑
    const [fileList, setFileList] = useState([{
        uid: '-1',
        name: 'thumb.png',
        status: 'done',
        thumbUrl: defaultImg,
    }]);

    useEffect(() => {
        setDataId(Common.getParam());
    }, []);

    useEffect(() => {
        getDataById({
            id: dataId
        }).then(res => {
            if (res && res.Success) {
                setSourceInfo(res.Data);
                if (res.Data !== null) {
                    setChecked(res.Data.DeleteProtect);
                    //請求回來數據後更新filelist
                    setFileList([{
                        uid: '-1',
                        name: 'thumb.png',
                        status: 'done',
                        thumbUrl: res.Data.thumbnail == null || res.Data.thumbnail == "" ? defaultImg : res.Data.thumbnail,
                    }]);
                }
            }
        })
    }, [dataId, refresh]);

    const saveData = data => {
        updateData(data).then(res => {
            if (res && res.Success) {
                notification.success({
                    message: "保存成功"
                });
                setThumbVisible(false);
                setRefresh(!refresh);
            }
        })
    }
    //預覽
    const handlePreview = async file => {
        setPreviewImage(file.url || file.thumbUrl);
        setPreviewVisible(true);
    };
	//關閉預覽
    const handleCancel = () => setPreviewVisible(false);
    //文件列表發生變化
    const handleChange = ({ fileList }) => {
        // console.log(fileList)
        setFileList(fileList)
    };
	//確定時更新數據
    const handleThumbSubmit = () => {
        let url = '';
        if (fileList.length > 0) {
            url = fileList[0].thumbUrl
        }
        let data = {
            Id: dataId,
            thumbnail: url,
        }
        saveData(data);
    }
    return (
        <>
            <div className={style.basic_info}>
                <div className={style.top_menu}>
                    <div className={style.title}>基本信息</div>
                    <div className={style.modify_btn} onClick={() => setEditVisible(true)}>
                        <EditOutlined />&nbsp;點擊修改基本信息
                    </div>
                </div>
                <div className={style.divider}></div>
                {
                    sourceInfo !== null
                    &&
                    <div className={style.content}>
                        <div className={style.thumb_div}>
                            <div className={style.thumb_img}>
                                <img src={sourceInfo.thumbnail == null || sourceInfo.thumbnail == "" ? defaultImg : sourceInfo.thumbnail} alt="default" />
                                <div className={style.thumb_edit} onClick={() => setThumbVisible(true)}>
                                    <span className="icon iconfont">&#xe61c;</span>
                                    &nbsp;&nbsp;點擊編輯縮略圖
                                </div>
                            </div>
                        </div>                    
                    </div>
                }
            </div>
            
            <Modal
                destroyOnClose
                maskClosable={false}
                title="編輯資源縮略圖"
                visible={thumbVisible}
                onOk={() => handleThumbSubmit()}
                onCancel={() => {
                    setThumbVisible(false)
                }}
                width={300}
                bodyStyle={{
                    marginLeft: 70
                }}
            >
                {
                    thumbVisible &&
                    <Upload
                        listType="picture-card"
                        fileList={fileList}
                        onPreview={handlePreview}
                        onChange={handleChange}
                    >
                       // 當有一個圖片文件時不顯示"加號"，因爲縮略圖一般只有一張
                        {fileList.length >= 1 ? null : <PlusOutlined />}
                    </Upload>
                }
            </Modal>
            <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
                <img alt="預覽圖片" style={{ width: '100%' }} src={previewImage} />
            </Modal>

        </>
    );
}

export default DetailUI;