React+ant 组件实现 excel 文件上传并选取其中的 sheet 页

const UploadButton = (props) => {

  const { btnProps, uploadProps } = props;

  const [isModalVisible, setIsModalVisible] = useState(false);

  const [fileData, setFileData] = useState([]);

  const [fileList, setFileList] = useState([]);

  const [uploading, setUploading] = useState(false);

  const [list, setlist] = useState();

  // 默认选中
  const [value, setValue] = useState();

  // 导入文件更新显示的内容
  const Display = async () => {
    let model, result;
    model = new Productions();
    result = await model.Updisplay();
  }

  // 确定选中二次上传
  const handleOk = () => {
    setIsModalVisible(false);
    const formData = new FormData(); // 创建formData对象

    // 因为是单选所以不需要循环
    formData.append('file', fileList);
    formData.append('list', value.sheetName);
    setUploading(true);

    axios({
      method: 'post',
      url: 'http://',
      processData: false,
      contentType: false,
      data: formData
    })
    .then(res => {
      // 获取axios返回的值
      console.log(res)
      if (res.data.message.includes('导入成功')){
        message.success('上传成功');
        Display();
      } else {
        message.error('上传失败');
      }
    })
    .finally(() => {
      setUploading(false);
    });
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const onChange = (info) => {
    // 文件上传中
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
      let res = info.file.response;
      // message.warning(`${res.message}`);
    }

    // 文件已经上传
    if (info.file.status === 'done') {
      let res = info.file.response;
      let resp = info.file.originFileObj;
      console.log(res.data);
      setFileData(res.data);
      setFileList(resp);
      if (res.code === 200){
        if (res.message.includes('sheet')){
          message.success(res.message);
          setIsModalVisible(true);
        }
      } else if (res.code === 400){
        if (res.message.includes('导入失败')){
          message.error(res.message);
        } else {
          message.error(res.message);
        }
      } else {
        message.warning(res.message);
      }
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  }

  // 判断
  const onChang = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
    setlist(value);
  };

  const beforeUpload = (file) => {
    // setFileList([...fileList, file]);
    return false;
  }

  return (
    <>
      <Upload
        showUploadList={false}
        data={list}
        beforeUpload={beforeUpload}
        onChange={onChange}
        {...props}
        {...uploadProps}
      >
        <Button
          icon={<ImportOutlined />}
          {...btnProps}
          {props.children}
        </Button>
      </Upload>

      {/* 展示文件中有的sheet页 */}
      <Modal
        title={'选择sheet页'}
        centered
        visible={isModalVisible}
        onCancel={handleCancel}
        onOk={handleOk}
      >
        <Radio.Group value={value} onChange={onChang}>
          <Space direction="vertical">
            {fileData.map((item) => {
              return <Radio value={item}>{item.sheetName}</Radio>
            })}
          </Space>
        </Radio.Group>
      </Modal>
    </>
  );
};

export default UploadButton;