如何在react-admin的FileInput中实现maxSize自定义验证消息？

API 探路者

2026-8-13

在react-admin的FileInput中实现maxSize自定义验证消息

react-admin 内置的验证规则里确实没有maxSize，但可以通过自定义验证函数来实现文件大小限制和自定义提示消息，具体步骤如下：

1. 编写自定义maxSize验证器

创建一个可复用的验证函数，接收文件大小阈值（字节为单位），返回用于校验的逻辑：

const maxSize = (maxSizeInBytes) => (value) => {
  // 无文件或非数组格式时不触发验证
  if (!value || !Array.isArray(value)) return undefined;
  
  // 筛选出超过大小限制的文件
  const oversizedFiles = value.filter(file => file.size > maxSizeInBytes);
  
  if (oversizedFiles.length > 0) {
    // 返回自定义错误消息，这里换算成MB更易读
    const maxSizeMB = (maxSizeInBytes / 1024 / 1024).toFixed(2);
    return `文件大小不能超过${maxSizeMB}MB`;
  }
  
  return undefined; // 验证通过时返回undefined
};

如果需要更精准的提示（比如指出具体哪个文件过大），可以修改验证逻辑：

const maxSize = (maxSizeInBytes) => (value) => {
  if (!value || !Array.isArray(value)) return undefined;
  
  const oversizedFileNames = value
    .filter(file => file.size > maxSizeInBytes)
    .map(file => file.name);
  
  if (oversizedFileNames.length > 0) {
    const maxSizeMB = (maxSizeInBytes / 1024 / 1024).toFixed(2);
    return `以下文件大小超过${maxSizeMB}MB限制：${oversizedFileNames.join(', ')}`;
  }
  
  return undefined;
};

2. 在FileInput中使用自定义验证器

将验证函数传入FileInput的validate属性即可：

import { SimpleForm, FileInput, FileField, required } from 'react-admin';

const PostCreate = () => (
  <SimpleForm>
    <FileInput 
      source="attachments" 
      label="附件"
      // 同时结合required规则和自定义maxSize规则
      validate={[required('请上传至少一个文件'), maxSize(5 * 1024 * 1024)]}
    >
      <FileField source="src" title="title" />
    </FileInput>
  </SimpleForm>
);