react antd上传图片视频pdf

antd上传附件分为图片视频文件，我封装成一个组件供使用，以下有几个案例，根据如下进行匹配：
组件：

import './index.less';

import { FileTextOutlined, PlusOutlined } from '@ant-design/icons';
import { useMemoizedFn } from 'ahooks';
import { Empty, Image, message, Upload, UploadProps } from 'antd';
import { RcFile } from 'antd/lib/upload';
import { UploadFile } from 'antd/lib/upload/interface';
import deploy from 'config';
import _ from 'lodash';
import React, { useState } from 'react';
import { getToken } from 'utils';

interface Props extends UploadProps {
  fileType?: 'img' | 'office' | 'pdf';
}
const index: React.FC<Props> = React.memo(({ className, fileType, ...props }) => {
  const [previewUrl, setPreviewUrl] = useState<string | undefined>();

  const handleBeforeUpload = useMemoizedFn((file: RcFile, FileList: RcFile[]) => {
    if (fileType === 'pdf') {
      if (!file.type.includes('application/pdf')) {
        message.info({ content: '请正确的选择PDF', className: 'ant-message-custom no-icon' });
        return Upload.LIST_IGNORE;
      }
    }
    if (fileType === 'img') {
      if (!file.type.includes('image/')) {
        message.info({ content: '请正确的选择图片', className: 'ant-message-custom no-icon' });
        return Upload.LIST_IGNORE;
      }
    }
    if (fileType === 'office') {
      if (!file.type.includes('application/vnd.openxmlformats') && !file.type.includes('application/vnd.ms')) {
        message.info({ content: '请正确的选择文档', className: 'ant-message-custom no-icon' });
        return Upload.LIST_IGNORE;
      }
    }

    return true;
  });
  const handlePreview = useMemoizedFn(async (file: UploadFile<any>) => {
    if (file.preview) {
      setPreviewUrl(file.preview);
    } else if (file.thumbUrl) {
      setPreviewUrl(file.thumbUrl);
    } else if (file.originFileObj) {
      let previewUrl = file.preview ?? (await getBase64(file.originFileObj));

      if (previewUrl) setPreviewUrl(previewUrl as string);
    }
  });

  return (
    <>
      <Upload
        className={`ant-upload-file ${className ?? ''}`}
        action={`${deploy.SERVER_URL}/datafile/upload`}
        headers={{ Authorization: `${getToken()}` }}
        listType="picture-card"
        {..._.omit(props, ['value', 'defaultValue'])}
        onChange={(info) => {
          const { file } = info;

          if (file.error) {
            file.error = {
              statusText: '上传失败',
              message: '上传失败',
            };
          }
          if (file.response?.message && typeof file.response?.message === 'string') {
            file.error = {
              statusText: file.response?.message,
              message: file.response?.message,
            };
            message.error(file.response?.message);
            file.response.message = undefined;
          }

          props.onChange && props.onChange(info);
        }}
        onPreview={props.onPreview ?? handlePreview}
        beforeUpload={fileType ? handleBeforeUpload : props.beforeUpload}
      >
        {props.children ?? (
          <div className="ant-upload-button-card">
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>上传</div>
          </div>
        )}
      </Upload>
      <span style={{ display: 'none' }}>
        <Image
          preview={{ src: previewUrl, visible: Boolean(previewUrl), onVisibleChange: () => setPreviewUrl(undefined) }}
        />
      </span>
    </>
  );
});

/// get Img file Base64
function getBase64(file: RcFile) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

export default index;

export const FileSelectBox: React.FC<{
  image?: React.ReactNode;
  description?: string;
  height?: string | number;
  width?: string | number;
  style?: React.CSSProperties;
}> = React.memo((props) => {
  return (
    <div className="ant-upload-file-slect-box" style={{ width: props.width, height: props.height, ...props.style }}>
      <Empty
        image={props.image ?? <FileTextOutlined />}
        imageStyle={{ height: 20 }}
        description={props.description ?? '选择文件'}
      />
    </div>
  );
});

使用图片：

<FileUpload
              fileType="img"
              style={{ width: '100%' }}
              maxCount={3}
              defaultFileList={props?.record?.imageList.map((e) => ({
                uid: e.id,
                name: e.name,
                fileName: e.name,
                status: 'done',
                type: 'image/jpeg',
                response: { id: e.id },
                thumbUrl: `${deploy.SERVER_URL}/datafile/download?dataFileId=${e.id}&token=${getToken()}`,
              }))}
              onChange={(info) => {
                let ids: string[] = info.fileList.filter((o) => o.status === 'done').map((o) => o.response['id']);

                props.form.setFieldsValue({ images: ids });
              }}
              children={
            	<div className="ant-upload-button-card">
      			<FileJpgOutlined style={{ fontSize: 40 }} />
     			<div style={{ marginTop: 8 }}>选择图片</div>
    			</div>
    }
            />

使用pdf：

<FileUpload
              fileType="pdf"
              style={{ width: '100%' }}
              showUploadList={{
                showPreviewIcon: false,
              }}
              defaultFileList={props?.record?.constructionDrawingsList.map((e) => ({
                uid: e.id,
                name: e.name,
                fileName: e.name,
                status: 'done',
                type: 'application/pdf',
                response: { id: e.id },
              }))}
              onChange={(info) => {
                let ids: string[] = info.fileList.filter((o) => o.status === 'done').map((o) => o.response['id']);

                props.form.setFieldsValue({ constructionDrawings: ids });
              }}
              children={
				<div className="ant-upload-button-card">
     			<FilePdfOutlined style={{ fontSize: 40 }} />
      			<div style={{ marginTop: 8 }}>选择PDF</div>
    			</div>
}
            />

视频上传也如上述如此。