Ant Design 上传组件禁用状态下图片回显解决方案

Ant Design 中的上传组件，如果设置了 disable 为 true，即禁用状态，那么上传的图片是不会回显的。这是因为禁用状态下，无法进行文件选择和上传操作。

如果想要禁用状态下也能回显图片，可以通过自定义样式来实现。可以在上传组件的样式中添加一个伪类，用来模拟上传完成后的图片回显效果。

示例代码如下：

import { Upload } from 'antd';

const UploadComponent = () => {
  return (
    <Upload
      disabled={true}
      className='custom-upload'
    >
      {/* 自定义样式 */}
      <div className='custom-upload-content'>
        <div className='custom-upload-image'></div>
      </div>
    </Upload>
  );
}

然后，在 CSS 文件中添加如下样式：

.custom-upload {
  /* 设置宽高和背景颜色 */
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  /* 其他样式 */
}

.custom-upload-content {
  /* 设置宽高和居中 */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-upload-image {
  /* 设置图片样式 */
  width: 100px;
  height: 100px;
  background-image: url('your-image-url');
  background-size: cover;
  background-position: center;
}

这样，即使上传组件的 disable 为 true，也可以通过自定义样式来实现图片的回显效果。