ant design,upload阻止文件上传

2 阅读1分钟

ant design 的 Upload 组件和Pro componentsProFormUploadButton组件

beforeUpload: beforeUploadHandler,

在上传前的事件中,return false 居然不能阻止文件上传。

要 return Upload.LIST_IGNORE


不完整代码如下


import { Upload } from 'antd';


  // 文件数量校验
  const beforeUploadHandler = (file: RcFile): boolean => {
    if (maxCount && fileList.length >= maxCount) {
      message.error(`最多只能上传 ${maxCount} 个文件`);
      return Upload.LIST_IGNORE;
    }
    return handleBeforeUpload(file, maxFileSize, acceptTypes);
  };
  
  
  // 上传组件配置
  const uploadProps: UploadProps = {
    customRequest,
    beforeUpload: beforeUploadHandler,
    fileList: processedFileList,
    listType,
    showUploadList: showUploadList && {
      showPreviewIcon: true,
      showRemoveIcon: true,
      showDownloadIcon: false, // 隐藏下载按钮
    },
    accept: acceptTypes.map((type) => `.${type}`).join(','),
    onPreview: handlePreviewInternal,
    onRemove: handleRemoveInternal,
    maxCount,
  };
  
  
  <Upload {...uploadProps} ref={uploadRef}>
     <Button
        icon={<UploadOutlined />}
        loading={loading}
        disabled={disableClick || loading}
      >
        {buttonText}
      </Button>
  </Upload>