学习 antd message 函数用法，包括 读取本地上传得文件

目标：类似 message.success() （调用函数）得方式，调起一个弹窗。弹窗功能：拿到上传excel文件得File，用于外部封装为FormData，传给后端。
重点是createRoot和unmount两个api。

/**
 * 下载文件
 * @param {any} data
 * @param {string} type 文件类型
 * @param {string} filename 文件名
 */
export function downloadFile(
  data: any,
  filename: string = '文件.xlsx',
  type: string = 'text/plain;charset=utf-8'
) {
  let blob = new Blob([data], { type: type });
  let URL = window.URL || window.webkitURL;
  let src = URL.createObjectURL(blob);
  // 下载文件
  if ('download' in document.createElement('a')) {
    // 非IE下载
    if (src) {
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = src;
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
      link.remove();
      URL.revokeObjectURL(src);
    }
  } else {
    (navigator as any).msSaveBlob(blob, filename);
  }
}
// 生成dom
function getContainer() {
  let _container: any = document.querySelector('#_container');
  if (!_container) {
    _container = document.createElement('div');
    _container.style.opacity = '0';
    _container.id = '_container';
    document.body.appendChild(_container);
  }
  return _container;
}
// 删除dom
function removeContainer(ele: HTMLElement) {
  ele.remove();
}
// function
interface IUploadFileObjProps extends ModalProps {
  /**
   * 处理弹窗确定按钮额外得操作
   *@param {RcFile[]} data 选中得文件或文件列表
   */
  onSubmit?: (data: RcFile[]) => Promise;
  /** 透传antd modal属性 */
  antdModalProps?: ModalProps;
  /** 透传antd upload属性 */
  antdUploadProps?: UploadProps;
  /** 覆盖upload.dragger内容区得样式 */
  content?: ReactNode;
}
// tsx
interface IUploadModalProps extends IUploadFileObjProps {
  /** 关闭弹窗时额外需要操作得内容 */
  hanldeClose?: () => void;
}
// tsx
export const UploadModal = memo((props: IUploadModalProps) => {
  const { hanldeClose, onSubmit, antdModalProps, antdUploadProps, content } =
    props;
  const [state, { toggle }] = useToggle(true);
  const onOK = useMemoizedFn(() => {
    if (fileList.length) {
      onSubmit?.(fileList as RcFile[]).then((res: boolean) => {
        if (res) {
          toggle();
          hanldeClose?.();
        }
      });
    }
  });
  const [fileList, setFileList] = useState([]);
  const beforeUpload = useMemoizedFn(
    (file: UploadFile, fileList: UploadFile[]) => {
      setFileList(fileList);
      return Promise.reject();
    }
  );
  const onRemove = useMemoizedFn((file: UploadFile) => {
    setFileList(fileList.filter((i) => i.uid !== file.uid));
  });
  const onPreview = useMemoizedFn((file: UploadFile) => {
    downloadFile(file, file.name);
  });
  const modalProps = useMemo(
    () => ({
      visible: state,
      onCancel() {
        toggle();
        hanldeClose?.();
      },
      onOk: onOK,
      ...antdModalProps,
    }),
    [antdModalProps, hanldeClose, onOK, state, toggle]
  );
  const uploadProps = useMemo(
    () => ({
      accept: '.xls,.xlsx',
      maxCount: 1,
      beforeUpload,
      fileList,
      showUploadList: false,
      ...antdUploadProps,
    }),
    [antdUploadProps, beforeUpload, fileList]
  );
  return (
    
      
        {content ?? (
          

            

              
            
            
支持xls、xlsx文件
            

              
              添加附件
            
          
        )}
      
      {fileList.length ? (
        

          {fileList.map((file, i) => (
            

              

                
                {file.name}
              
              

                 onRemove(file)}
                >
                  删除
                
                 onPreview(file)}
                >
                  预览
                
              
            
          ))}
        
      ) : null}
    
  );
});
export function uploadFileObj(props: IUploadFileObjProps) {
  const container = getContainer();
  const _dom = createRoot(container);
  const hanldeClose = () => {
    _dom.unmount();
    removeContainer(container);
  };
  const _props = {
    ...props,
    hanldeClose,
  };
// 这里就可以渲染任意得Node，我在这里就包了一个二次封装得modal
  _dom.render();
}

使用

uploadFileObj({
      onSubmit(file) {
        const formData = new FormData();
        formData.append('file', file[0]);
        return new Promise((resolve) => {
          boxImportBoxExcel(formData).then(({ success }) => {
            resolve(success);
            if (success) {
              message.success('导入成功');
            } else {
              message.error('导入失败');
            }
          });
        });
      },
      antdModalProps: {
        title: (
          

            批量导入
            
              下载模板
            
          
        ),
      },
    });