React-dropzone拖拽上传限制特定文件名格式实现咨询

• 自定义文件名校验逻辑：借助react-dropzone提供的validator配置项，编写自定义校验函数，对上传文件的文件名进行规则校验，这是实现特定文件名格式限制的核心。
• 编写匹配目标格式的正则表达式：针对Name-YYYY-MM-DD_hh-mm-ss-uuuu.jpeg格式，正则需要覆盖以下部分：
  • 前缀名称：允许字母、数字、下划线、短横线（可根据实际需求调整规则）
  • 日期段：YYYY-MM-DD格式，对应正则\d{4}-\d{2}-\d{2}
  • 时间段：hh-mm-ss-uuuu格式，对应正则\d{2}-\d{2}-\d{2}-\d{4}
  • 文件后缀：.jpeg或.jpg，忽略大小写
• 关联校验与dropzone：将正则校验逻辑写入validator函数，校验不通过时返回包含错误码和提示信息的对象，react-dropzone会自动将该文件标记为拒绝，并在fileRejections中记录错误，无需额外处理错误展示逻辑。
• 保留文件类型校验：继续使用原有的accept配置限制文件为jpg/jpeg类型，实现文件类型+文件名格式的双重校验。

const dropzoneConfig = {
  // 保留原有的文件类型限制
  accept: {
    'image/*': ['.jpg', '.jpeg']
  },
  // 自定义文件名校验函数
  validator: (file) => {
    // 正则说明：匹配任意合法名称-日期_时间.后缀的格式，后缀支持jpg/jpeg，忽略大小写
    const filenamePattern = /^[a-zA-Z0-9_-]+-\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}-\d{4}\.(jpe?g)$/i;
    // 校验文件名是否符合规则
    if (!filenamePattern.test(file.name)) {
      return {
        code: 'invalid-filename-format',
        message: '文件名格式错误，请使用：Name-YYYY-MM-DD_hh-mm-ss-uuuu.jpeg 格式'
      };
    }
    // 校验通过返回null
    return null;
  }
};

使用时直接将该配置对象传入useDropzone即可，原有的fileRejectionItems会自动渲染文件名不符合要求的错误提示。

内容的提问来源于stack exchange，提问作者James254