Ant Design Upload 限制已存在图片上传 - beforeUpload 使用

在 Ant Design 中，可以通过 beforeUpload 属性来控制上传文件的行为。如果希望当图片已存在时不允许再次上传，可以在 beforeUpload 函数中进行判断。以下是一个示例代码：

import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

class UploadComponent extends React.Component {
  beforeUpload = (file) => {
    // 判断图片是否已存在
    if (this.checkImageExist(file)) {
      message.error('图片已存在，不可再次上传');
      return false; // 返回false，阻止上传
    }
    return true; // 允许上传
  };

  checkImageExist = (file) => {
    // 判断图片是否已存在的逻辑，可以根据具体业务进行实现
    // 返回true表示图片已存在，返回false表示图片不存在
    // 例如，可以通过发送请求到服务器查询图片是否存在
    return false;
  };

  render() {
    return (
      <Upload beforeUpload={this.beforeUpload}>
        <button>
          <UploadOutlined /> 上传图片
        </button>
      </Upload>
    );
  }
}

在上述代码中，beforeUpload 函数会在上传文件之前调用。在该函数中，可以根据具体的业务逻辑判断图片是否已存在，如果已存在，则返回 false 阻止上传，并通过 message.error 方法显示错误提示。如果图片不存在，则返回 true 允许上传。