如何用Yup和React验证上传文件名？现有验证失效求助

原代码的核心问题有两个：

• 未正确处理文件数组：从value.length能看出files是文件数组，但文件名校验直接访问value.name——数组本身没有name属性，这直接导致校验永远失败。
• 匹配逻辑错误：原代码用数组的includes判断文件名是否完全等于数组元素，但你需要的是文件名包含数组中的任一关键词，逻辑完全不符。

const SUPPORTED_NAMES = ['Account', 'Location', 'SS'];

const validationSchema = yup.object({
  files: yup
    .array() // 明确声明是数组类型，替代原mixed类型
    .min(1, 'You need to provide a file') // 用Yup内置方法做必填校验，比自定义test更简洁
    .test(
      'fileName',
      `Unsupported name: file name must include one of ${SUPPORTED_NAMES.join(", ")}`,
      (files) => {
        // 确保每个上传的文件名都包含至少一个支持的关键词
        return files.every(file => 
          SUPPORTED_NAMES.some(keyword => file.name.includes(keyword))
        );
      }
    ),
});

• 替换类型声明：把yup.mixed()改成yup.array()，明确files是文件数组类型，适配多文件上传场景，还能直接使用Yup内置的数组校验规则。
• 简化必填校验：用min(1, 提示语)替代自定义的test，更符合Yup的使用习惯，代码更简洁。
• 修正文件名校验逻辑：
  1. 用files.every遍历所有文件，保证每个文件都符合规则。
  2. 对单个文件，用SUPPORTED_NAMES.some检查文件名是否包含数组里的任一关键词——只要有一个匹配就通过校验。
• 优化错误提示：把允许的关键词直接放进提示文本，用户能直观知道符合要求的文件名范围。

如果你的需求是文件名完全等于数组中的某个值（而非包含），只需把file.name.includes(keyword)改成file.name === keyword即可。

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