Antd Dragger文件上传

           <Dragger {...draggerContentProps} className={Styles.upload}>
                                <div className={Styles.dragger}>
                                    <span>
                                        <FolderAddOutlined style={{ fontSize: '36px', color: '#4C5362' }} />
                                    </span>
                                    <p className={Styles.text}>单击或拖拽文件到此区域进行上传</p>
                                    <p className={Styles.hint}>文件格式仅限Excel、PDF、Word、zip，文件最大配置为20M</p>
                                </div>
                            </Dragger>

    const draggerAnwserProps = {
        name: 'file',
        multiple: false,
        accept: '.xls,.xlsx,.pdf,.doc,.docx,.zip',
        action: '/api/upload/resources',
        beforeUpload: beforeUpload,
        fileList: anwserFileList,
        maxCount: 1,
        onChange(info) {
            const { status } = info.file;

            if (status !== 'uploading') {
            } else {
                setAnwserFileList(info.fileList);
            }

            if (info.file.status === 'removed') {
                setAnwserFileList(info.fileList);
            }

            if (status === 'done') {
                if (info.file.response.success) {
                    message.success(`${info.file.name} 上传成功`);
                    setAnwserFileList(info.fileList);
                } else {
                    message.error(`${info.file.name} 上传失败`);
                    const tmpFileList = info.fileList.filter(item => item.uid !== info.file.uid);
                    setAnwserFileList(tmpFileList);
                }
            } else if (status === 'error') {
                message.error(`${info.file.name} 上传失败`);
                const tmpFileList = info.fileList.filter(item => item.uid !== info.file.uid);
                setAnwserFileList(tmpFileList);
            }
        },
        onDrop(e) {
        },
    };


    const beforeUpload = file => {
        // 不限制文件大小或者没有设置文件最大值

        const isLtSize = file.size / 1024 / 1024 < 20;
        if (!isLtSize) {
            message.error('文件大于20M，不可上传');
        }
        return isLtSize;
    };

自定义上传

     <Dragger {...draggerProps}>
                        <div className={Styles.dragger}>
                            <p className={Styles.text}>单击或拖拽文件到此区域进行上传</p>
                            <p className={Styles.hint}>支持单个Excel上传</p>
                        </div>
                    </Dragger>

  const draggerProps = {
        name: 'file',
        multiple: true,
        accept: '.xls,.xlsx',
        fileList: fileList,
        customRequest: fileInfo => {
            const tmpFileList = fileList.concat();
            tmpFileList[0] = fileInfo.file;
            setFileList(tmpFileList);
        },
        onRemove: () => {
            setFileList([]);
        },
    };

    const onOk = () => {
        if (!fileList.length) {
            message.warn('请上传excel文件');
            return;
        }
        uploadFile(fileList[0]);
    };

    // 文件上传
    const uploadFile = file => {
        const params = new FormData();
        params.append('file', file);
        const extraOptions = {
            headers: {
                'content-type': 'multipart/form-data',
            },
        };
        axios
            .post('/api/user/batchAddUser', params, extraOptions)
            .then(res => {
                const result = res.data?.result;
                const success = res.data?.success;
                if (success) {
                    message.success('上传成功');
                    onSuccuss();
                    setVisible(false);
                    setFileList([]);
                } else {
                    let msg = res.data?.message || '上传失败';
                    if (_.isArray(result)) {
                        const tmpTip = result.join('、');
                        msg = `第${tmpTip}行，表格格式错误`;
                        message.error(msg);
                    } else {
                        message.error(msg);
                    }
                }
            })
            .catch(err => {
                message.error('上传失败');
            });
    };