Form中使用Upload上傳

import React, { Component, Fragment } from 'react'
import { Button, Modal, Form, message, Upload } from 'antd'

const FormItem = Form.Item

export default class FormUpload extends Component {
    formRef = React.createRef()
    constructor(props) {
        super(props)

        this.state = {
            editPanleType: true
        }

        /* 上傳模塊 */
        this.uploadProps = {
            name: 'file',
            action: 'https://wbx-up-prod.fapiaoer.cn/api/advertiseResConf/uploadFile?cos=1',
            headers: {
                authorization: 'authorization-text',
            },
            accept: '.xls,.xlsx,.csv,.png',
            onChange(info) {
                if (info.file.status === 'done') {
                    // message.success('上傳成功！')
                } else if (info.file.status === 'error') {
                    // message.error(`${info.file.name} file upload failed.`);
                }
            },
        };
    }

    componentDidMount() {
        this.formRef.current && this.formRef.current.setFieldsValue({
            certificate_url_list: [{
                uid: '1',   // uid 必須要有，否則會報錯
                name: 'xxx.png',
                status: 'done',
                response: 'Server Error 500', // custom error message to show
                url: 'http://www.baidu.com/xxx.png',
              },{
                uid: '3',
                name: 'zzz.png',
                status: 'error',
                response: 'Server Error 500', // custom error message to show
                url: 'http://www.baidu.com/zzz.png',
              }]
        })
    }
    /**
     * 
     * @param {*} 上傳
     */
    normFile = (e) => {
        console.log('Upload event:', e);
        if (e.file.status === 'done') {
            message.success('上傳成功！')
            if (Array.isArray(e)) {
                return e.slice(-1);   // 只能上傳一個文件，后面上傳的文件會覆蓋前面的文件
            }
            return e && e.fileList.slice(-1);

        } else if (e.file.status === 'error') {

            console.log(`${e.file.name} 文件上傳失敗.`);
            
            if (Array.isArray(e)) {
                e.splice(e.length - 1);
                return e
            }
            e && e.fileList.splice(e.fileList.length - 1)
            return e && e.fileList;   // 上傳失敗，則刪除失敗的文件
            
        } else {
            // 手動刪除文件
            console.log('手動刪除文件', e);
            if (Array.isArray(e)) {
                return e;
            }
            return e && e.fileList;
        }
    };
    /* 保存formData */
    saveFormData = () => {
        console.log(this.formRef.current.getFieldsValue())
        this.formRef.current.validateFields().then(form => {
            console.log('form',form)
        })
    }

    switchEditPanel = () => {
        this.setState({
            editPanleType: false
        })
    }

    render() {
        const { editPanleType } = this.state
        const title = '新建'

        return (
            <div className="pay-account-management">
                <Modal width="860px" destroyOnClose className="ProcessConfigModal" title={title} visible={editPanleType}
                    onCancel={() => this.switchEditPanel()}
                    onOk={this.saveFormData}
                >
                    <Form ref={this.formRef} style={{ width: '90%' }} labelCol={{ flex: '160px' }} labelAlign="right">
                        {/* <FormItem name="certificate_url_list" label="文件"
                            valuePropName="fileList"
                            getValueFromEvent={e => this.normFile(e)}
                            rules={[{ required: true, message: '請上傳文件' }]}
                            extra='備注信息'
                        >
                            <Upload {...this.uploadProps}>
                                <Button type="primary">
                                    上傳文件
                                </Button>
                            </Upload>
                        </FormItem> */}

                        {/* 組件方式 */}
                        <FormItemUpload certificateUrlList={"certificate_url_list"}></FormItemUpload>

                    </Form>
                </Modal>
            </div>
        )
    }
}



const FormItemUpload = (props) => {
    const { certificateUrlList } = props
    const uploadProps = {
        name: 'file',
        action: 'https://wbx-up-prod.cn/uploadFile?cos=1',
        headers: {
            authorization: 'authorization-text',
        },
        accept: '.xls,.xlsx,.csv,.png',
        onChange(info) {},
    };
    const normFile = (e) => {
        console.log('Upload event:', e);
        if (e.file.status === 'done') {
            message.success('上傳成功！')
            if (Array.isArray(e)) {
                return e.slice(-1);   // 只能上傳一個文件，后面上傳的文件會覆蓋前面的文件
            }
            return e && e.fileList.slice(-1);

        } else if (e.file.status === 'error') {

            console.log(`${e.file.name} 文件上傳失敗.`);
            
            if (Array.isArray(e)) {
                e.splice(e.length - 1);
                return e
            }
            e && e.fileList.splice(e.fileList.length - 1)
            return e && e.fileList;   // 上傳失敗，則刪除失敗的文件
            
        } else {
            // 手動刪除文件
            console.log('手動刪除文件', e);
            if (Array.isArray(e)) {
                return e;
            }
            return e && e.fileList;
        }
    };
    return (
        <Fragment>
            <FormItem name={certificateUrlList} label="文件"
                valuePropName="fileList"
                getValueFromEvent={normFile}
                rules={[{ required: true, message: '請上傳文件' }]}
                extra='備注信息'
            >
                <Upload {...uploadProps}>
                    <Button type="primary">
                        上傳文件
                    </Button>
                </Upload>
            </FormItem>
        </Fragment>
    )
}