解决antd批量导入loading下滑

更新: 1970/1/1 08:00:00

一、问题背景

在使用 antd 的上传文件组件时，如果支持批量上传，那么设置的 loading 可能就存在会下滑的问题。

---

二、关键代码

<Form>
  <Form.Item label="上传附件" required style={{ marginTop: 32 }}>
    <div className="more-upload-wrapper">
      <Spin spinning={uploadingCount > 0}>
        <Dragger {...uploadProps}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击或拖动文件到此区域以上传</p>
          <p className="ant-upload-hint">支持单次或批量上传</p>
        </Dragger>
      </Spin>
    </div>
  </Form.Item>
</Form>

// 批量上传文件的loading效果样式
.more-upload-wrapper .ant-spin-nested-loading {
  height: 175px !important; // 可以根据需要自行调整
}

三、最终效果