fe_service_ebtp_frontend/src/utils/ExtendUpload/index.tsx

import React, { useEffect, useState } from 'react';
import { Upload, Button, message, Modal, Spin } from "antd";
import { UploadOutlined, CloseSquareOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { getSessionRoleData, getUserToken } from '@/utils/session';
import { UploadProps } from 'antd/lib/upload/interface';
import { downloadFile, getFileListByBid, uploadAttachmentPath } from '../DownloadUtils';
import { createNewFileBid, removeFileByOid } from '@/services/download_';

interface ExtendUploadProps {
  bid?: string;
  value?: any;
  onChange?: (value: any) => void;
  btnName?: string;
  maxCount?: number;
  maxSize?: number;
  uploadProps?: UploadProps;
}
const ExtendUpload: React.FC<ExtendUploadProps> = (props) => {


  const { bid, onChange, btnName, maxCount, maxSize, uploadProps } = {
    maxCount: 0,
    maxSize: 30,
    btnName: "上传",
    ...props
  };

  const [spin, setSpin] = useState<boolean>(false);//加载
  const [returnValue, setReturnValue] = useState<string>("");
  const [fileList, setFileList] = useState<any>([]);

  const triggerChange = (changedValue: any) => {
    if (onChange) {
      onChange(changedValue);
    }
  };

  useEffect(() => {
    initBidValue(bid)
  }, [bid])

  //初始化bid方法
  const initBidValue = async (bid: any) => {
    if (bid !== "" && bid !== null && bid !== undefined) {
      fileListById(bid)
      setReturnValue(bid);
    } else {
      await createNewFileBid().then(res => {
        setReturnValue(res.id);
        triggerChange("");
      })
    }
  }

  const fileBeforeUpload = (curFile: any, curFileList: any) => {
    const promise = new Promise<File | void>((resolve, reject) => {
      if (maxSize === 0) {

      } else {
        let curSize = curFile.size / 1024 / 1024;
        if (maxSize <= curSize) {
          message.error(`当前附件大小为"` + curSize.toFixed(2) + `M"，超过允许的最大值"` + maxSize + `M"，不可以继续上传！`);
          reject(false);
        }
      }
      if (maxCount === 0) {

      } else {
        let curCount = fileList.length;
        if (maxCount <= curCount) {
          message.error(`当前附件数量为"` + curCount + `"，已经达到允许的最大数量"` + maxCount + `"，不可以继续上传！`);
          reject(false);
        }
      }
      resolve(curFile);
    });
    return promise;
  }
  //fileChange中查询文件列表的方法封装
  const fileListById = (fileId: any) => {
    getFileListByBid(fileId).then(res => {
      setFileList(res);
      if (res?.length > 0) {
        triggerChange(fileId);
      } else {
        triggerChange("");
      }
    }).finally(() => {
      setSpin(false);
    })
  }

  const fileChange = async (info: any) => {
    const { file, fileList } = info;
    setSpin(true);
    if (file.status === 'uploading' || file.status === 'removed' || file.status === 'done' || file.status === 'error') {
      if (file.status === 'uploading') {
        setFileList(fileList);
      } else {
        if (file.status === 'removed') {
          if (file?.uid !== "") {
            await removeFileByOid(file.uid)
          }
          message.success("删除成功");
        } else if (file.status === 'done') {
          message.success("上传成功");
        } else if (file.status === 'error') {
          message.error("上传失败，请重新上传");
        }
        //重新获取文件列表并确认是否返回文件id
        fileListById(returnValue)
      }
    } else {
      fileListById(returnValue)
    }
  }

  const fileRemove = (info: any) => {
    const promise = new Promise<boolean | void>(function (resolve, reject) {
      Modal.confirm({
        title: '删除附件',
        icon: <ExclamationCircleOutlined />,
        content: '确定要删除选中的附件?',
        centered: true,
        onOk() {
          resolve(true);
        },
        onCancel() {
          reject();
        },
      });
    });
    return promise;
  }

  return (
    <>
      <Spin spinning={spin}>
        <Upload
          onPreview={downloadFile}
          {...uploadProps}
          key={"file" + returnValue}
          action={uploadAttachmentPath}
          data={{
            appCode: 'ebtp-cloud-frontend',
            objectId: returnValue,
          }}
          headers={{
            Authorization: getUserToken(),
            currentRoleCode: getSessionRoleData()?.roleCode,
          }}
          name="multipartFiles"
          beforeUpload={fileBeforeUpload}
          onChange={fileChange}
          onRemove={fileRemove}
          showUploadList={{
            removeIcon: <CloseSquareOutlined />,
          }}
          fileList={fileList}
        >
          {!uploadProps?.disabled ?
            <Button disabled={uploadProps?.disabled} icon={<UploadOutlined />}>{btnName}</Button>
            : null}
        </Upload>
      </Spin>
    </>
  )
}
export default ExtendUpload