react 中使用Dragger

 

import { message, Modal, Select, UploadProps } from 'antd'
import Dragger from 'antd/lib/upload/Dragger';
import React, { useEffect, useState } from 'react'
import styles from '../components/ImportWorkerModal.less'

type ImportWorkerModalProps = {
    isVisible: boolean;
    onCancel: () => void
    dataHotel: any
}

const ImportWorkerModal: React.FC<ImportWorkerModalProps> = (props) => {
    const { isVisible, onCancel, dataHotel } = props
    const [hotelData, setHotelData] = useState()
    useEffect(() => {
        if (dataHotel) {
            setHotelData(dataHotel[0].id)
        }
    }, [])

    const draggerExcel: UploadProps = {
        name: 'file',
        multiple: true,
        // action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        maxCount: 1,
        beforeUpload(file: any) {     //提交文件之前校验
            const isIMG =
                file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                file.type === 'application/vnd.ms-excel';
            if (!isIMG) {
                message.error('您只能上传excel文件!');
            }
            return isIMG;
        },
        onChange(info: any) {
            if (info.file.status === 'uploading') {
                return;
            }
            if (info.file.status === 'done') {
                // 服务器返回的文件名
                if (info.file.response.rest_code == 1) {
                    // setDocumenUploadItem([{
                    //   uid: info.file.uid,
                    //   name: info.file.name,
                    //   status: 'done',
                    // }])
                    // setUploadInfo({                 //每次上传都把上传后的文件信息保存进去state里面
                    //   uid: info.file.uid,
                    //   url:info.file.response.data.url,
                    //   activityId:activityId,
                    //   formList:info.file.response.data.list
                    // })
                } else {
                    message.info('后台数据处理异常!');
                }
            } else {
            }
        },
         //文件上传列表删除时的回调函数
        onRemove(val: any)   {
            // try {
            //   if(val.uid == uploadInfo.uid){
            //     initUploadForm()
            //     setDocumenUploadItem([])
            //   }
            // } catch (error) {
            //   initUploadForm()
            //   setDocumenUploadItem([])
            // }
        }
    };
    return (
        <div>
            <Modal
                title='批量导入工作人员'
                visible={isVisible}
                onCancel={() => {
                    onCancel()
                }}
                maskClosable={false}
                width={600}
            >
                <Dragger  {...draggerExcel}
                >

                    <p className="ant-upload-text">点击或拖拽酒工作人员的EXCEL文件上传</p>
                    <p className="ant-upload-hint">
                        可上传多个EXCEL文件，默认选择最后一个
                    </p>
                </Dragger>
                <div
                    className={styles.downloadEccel}
                    onClick={() => {
                        console.log('点击了');

                        // window.open()
                    }}
                >点击下载EXCEL模板</div>
                <span style={{ color: 'red', fontSize: '18px', marginRight: '4px' }}>*</span>
                <Select
                    value={hotelData}
                    style={{ width: '200px' }}
                    onChange={(value) => {
                        setHotelData(value)
                    }}
                >
                    {
                        dataHotel?.map((item: any) => {
                            return <Select.Option key={item.id} value={item.id}> {item.name}</Select.Option>
                        })
                    }
                </Select>
            </Modal>

        </div >
    )
}

export default ImportWorkerModal