如何在React/TypeScript中用Yup验证上传文件名不重复？

以下是几种实现文件集中无重复文件名验证的实用思路，可结合你已有的文件名规则验证逻辑整合：

1. 利用Set数据结构快速检测重复 #

Set的核心特性是存储唯一值，通过遍历文件列表收集文件名，对比Set的长度与原文件数量即可判断是否存在重复。如果需要忽略大小写（比如将Test.txt和test.txt视为重复），可以先将文件名统一转成小写/大写再存入Set。

示例代码（整合原有验证逻辑） #

先修正你原有代码中的逻辑问题（原代码会在第一个符合规则的文件就返回true，忽略后续不符合的文件），再添加重复验证：

const SUPPORTED_NAMES = ["text", "command", "execute"];

// 验证单个文件符合命名规则
const isValidFileName = (file: File): boolean => {
  return SUPPORTED_NAMES.some(name => 
    file.name.toLowerCase().includes(name.toLowerCase())
  );
};

// 检查是否存在重复文件名（caseSensitive控制是否区分大小写）
const hasDuplicateFiles = (files: FileList, caseSensitive = false): boolean => {
  const nameSet = new Set<string>();
  for (let i = 0; i < files.length; i++) {
    const file = files.item(i);
    if (!file?.name) continue;
    const targetName = caseSensitive ? file.name : file.name.toLowerCase();
    if (nameSet.has(targetName)) {
      return true; // 发现重复
    }
    nameSet.add(targetName);
  }
  return false;
};

// 整合验证的测试函数
test('fileValidation', 'invalid files', (value: FileList) => {
  // 先验证所有文件符合命名规则
  for (let i = 0; i < value.length; i++) {
    const file = value.item(i);
    if (!file?.name || !isValidFileName(file)) {
      return false;
    }
  }
  // 再验证无重复文件名
  return !hasDuplicateFiles(value);
});

2. 数组遍历对比（兼容旧环境） #

如果需要兼容不支持Set的环境，可以用数组存储已遍历的文件名，每次遍历新文件时检查数组中是否已存在对应名称：

const hasDuplicateFiles = (files: FileList, caseSensitive = false): boolean => {
  const nameList: string[] = [];
  for (let i = 0; i < files.length; i++) {
    const file = files.item(i);
    if (!file?.name) continue;
    const targetName = caseSensitive ? file.name : file.name.toLowerCase();
    if (nameList.includes(targetName)) {
      return true;
    }
    nameList.push(targetName);
  }
  return false;
};

关键注意点 #

• 若业务要求严格区分文件名大小写，将caseSensitive设为true即可；否则统一转大小写避免误判。
• 原有验证逻辑需调整：确保所有文件都符合命名规则才返回true，而非第一个符合就返回。

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