如何使用Zod校验图片？限制最大3MB且仅支持jpg/png/gif格式

Zod没有提供内置的专用图片校验API，但完全可以通过其自带的实例校验+自定义refine规则实现你需要的校验逻辑。你当前编写的z.record(z.string())仅适用于校验键值均为字符串的普通对象，完全不适配File类型的图片入参，需要替换为如下逻辑：

可直接复用的校验代码 #

import { z } from 'zod';

// 校验规则常量配置
const MAX_IMAGE_SIZE = 3 * 1024 * 1024; // 3MB换算为字节单位
const ALLOWED_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif'];

const payloadSchema = z.object({
  image: z
    // 第一步先校验入参是标准File实例
    .instanceof(File, { message: '请上传有效的图片文件' })
    // 校验文件体积不超过上限
    .refine(file => file.size <= MAX_IMAGE_SIZE, {
      message: '图片最大体积不能超过3MB'
    })
    // 校验文件格式属于允许范围
    .refine(file => ALLOWED_MIME_TYPES.includes(file.type), {
      message: '仅支持jpg、png、gif三种图片格式'
    })
});

关键注意点 #

• 不要依赖文件后缀做格式校验：必须读取File实例的type字段获取MIME类型判断，避免用户手动修改文件后缀绕过规则。注意jpg格式对应的MIME值是image/jpeg，不要误写为image/jpg。
• 服务端场景适配：如果是Node.js服务端接收上传文件，部分框架（比如Express搭配multer）会封装自定义文件对象，只要对应调整size、type字段的读取路径即可，核心校验逻辑完全通用。

简单使用示例 #

// 前端文件输入校验场景示例
const uploadInput = document.querySelector('#image-upload');
const selectedFile = uploadInput.files?.[0];

const validateResult = payloadSchema.safeParse({ image: selectedFile });
if (!validateResult.success) {
  // 直接取出错误提示反馈给用户即可
  console.log(validateResult.error.issues[0].message);
}

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