Next.js Server Actions中Zod图片验证异常问题求助

你的核心问题在于Zod schema中对image字段的数据类型假设错误：两个refine规则都默认files是包含File的数组/FileList，但实际传入验证的image值大概率是单个File对象，导致files?.[0]返回undefined，进而触发验证失败。

排查步骤 #

在refine函数里添加日志，确认传入的image数据结构：

.refine((files) => {
  console.log('当前传入的image值:', files); // 查看实际数据类型
  return files?.[0]?.size <= MAX_FILE_SIZE;
}, `Max image size is 5MB.`)

针对性修复 #

根据实际数据类型调整schema：

情况1：传入的是单个File对象 #

将z.any()改为z.instanceof(File)，并直接使用file对象而非file?.[0]：

export const newProductSchema = z.object({
  title: z.string().min(2, 'Minimum 2 chars.').max(15, 'Maximum 15 chars.'),
  image: z
    .instanceof(File)
    .refine(
      (file) => file.size <= MAX_FILE_SIZE,
      `Max image size is 5MB.`
    )
    .refine(
      (file) => ACCEPTED_IMAGE_TYPES.includes(file.type),
      'Only .jpg, .jpeg, .png and .webp formats are supported.'
    )
    .optional(),
});

情况2：传入的是FileList（类数组） #

保留数组访问，但先校验是否有文件，避免空值报错：

export const newProductSchema = z.object({
  title: z.string().min(2, 'Minimum 2 chars.').max(15, 'Maximum 15 chars.'),
  image: z
    .instanceof(FileList)
    .refine(
      (files) => files.length > 0 && files[0].size <= MAX_FILE_SIZE,
      `Max image size is 5MB.`
    )
    .refine(
      (files) => files.length > 0 && ACCEPTED_IMAGE_TYPES.includes(files[0].type),
      'Only .jpg, .jpeg, .png and .webp formats are supported.'
    )
    .optional(),
});

情况3：传入的是File数组 #

用z.array(z.instanceof(File))定义类型：

export const newProductSchema = z.object({
  title: z.string().min(2, 'Minimum 2 chars.').max(15, 'Maximum 15 chars.'),
  image: z
    .array(z.instanceof(File))
    .refine(
      (files) => files.length > 0 && files[0].size <= MAX_FILE_SIZE,
      `Max image size is 5MB.`
    )
    .refine(
      (files) => files.length > 0 && ACCEPTED_IMAGE_TYPES.includes(files[0].type),
      'Only .jpg, .jpeg, .png and .webp formats are supported.'
    )
    .optional(),
});

额外优化 #

避免使用z.any()，明确类型不仅能解决验证问题，还能获得更好的TypeScript类型提示。

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