ant design 的 Upload
组件和Pro components
的ProFormUploadButton
组件
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>