Antd Upload封装（React）

封装的功能包括：

1. 文件类型检查
2. 文件大小检查
3. 文件数量检查
4. 文件预览

供参考

import React, {
    ReactNode, useState } from 'react';
import {
    Upload, Button, Modal, message } from 'antd';
import {
    UploadProps } from 'antd/lib/upload/Upload';
import {
    UploadChangeParam } from 'antd/lib/upload';
import {
    UploadFile } from 'antd/es/upload/interface';
import CenterImage from '@/components/CenterImage/CenterImage';

const accetpMap = {
   
  zip: 'application/zip,application/x-zip,application/x-zip-compressed',
  pdf: 'application/pdf',
  excel:
    'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  image: 'image/jpeg,image/bmp,image/png,image/gif,image/svg',
  word:
    '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  csv: '.csv',
  normal: 'image/jpeg,image/png',
  normalAndSvg: 'image/jpeg,image/png,image/svg+xml'
};

interface FileProps {
   
  onChange?: (file: any) => void;
  value?: any[];
  // 子组件
  children?: ReactNode;
  /** 文字说明 */
  extra?: string | ReactNode;
  // 限制数量
  amount?: number;
  // 限制大小 单位 M
  size?: number;
  // 限制上传类型
  accept?:
    | 'zip'
    | 'excel'
    | 'pdf'
    | 'image'
    | 'word'
    | 'csv'
    | 'normal'
    | 'normalAndSvg'
    | Partial<'zip' | 'excel' | 'pdf' | 'image' | 'word' | 'csv'>[];
  // 同upload参数
  otherProps?: UploadProps;
}
/** 文件上传
 * @param amount 上传数量限制，默认不限制，超过设定值隐藏上传按钮
 */
export default function Index(