使用React Hook Form Resolvers处理Joi文件上传验证问题

问题背景

在使用React Hook Form结合Joi验证库处理文件上传时，开发者经常会遇到一个典型问题：当尝试对File对象进行属性验证时，系统会抛出Cannot read properties of undefined (reading 'length')错误。这个问题尤其出现在开发者尝试对文件对象的name等属性进行验证时。

问题分析

当使用Joi验证File对象时，简单的对象类型声明可以正常工作：

const file = Joi.object<File>().label("File");

然而，一旦尝试对File对象的属性进行具体验证，如验证文件名长度时：

const file = Joi.object<File>({
  name: Joi.string().max(255).required(),
}).label("File");

系统就会抛出错误。这是因为Joi在内部处理File对象时存在兼容性问题，无法直接访问File对象的属性进行验证。

解决方案

针对这一问题，可以采用Joi的自定义验证器(Custom Validator)来解决。以下是实现方案：

1. 创建自定义验证器函数

我们可以为不同的文件属性创建专门的验证器函数。例如，针对文件名长度的验证：

import type { CustomValidator } from 'joi';

const fileNameValidator = (minLength: number, maxLength: number): CustomValidator<File> => {
  return (value, helpers) => {
    const nameLength = value.name.trim().length;
    if (nameLength < minLength) {
      return helpers.error('filename.min');
    }
    if (nameLength > maxLength) {
      return helpers.error('filename.max');
    }
    return value;
  };
};

2. 在Joi模式中使用自定义验证器

将自定义验证器应用到Joi模式中：

const fileSchema = Joi.object<File>()
  .instance(File)
  .custom(fileNameValidator(1, 200))
  .messages({
    'filename.min': '文件名太短',
    'filename.max': '文件名太长',
  });

3. 扩展其他文件属性验证

同样的方法可以扩展到其他文件属性的验证，如文件类型、文件大小等：

const fileTypeValidator = (allowedTypes: string[]): CustomValidator<File> => {
  return (value, helpers) => {
    if (!allowedTypes.includes(value.type)) {
      return helpers.error('filetype.invalid');
    }
    return value;
  };
};

const fileSizeValidator = (maxSize: number): CustomValidator<File> => {
  return (value, helpers) => {
    if (value.size > maxSize) {
      return helpers.error('filesize.exceeded');
    }
    return value;
  };
};

最佳实践

1. 组合验证器：可以将多个验证器组合使用，实现全面的文件验证

   const fileSchema = Joi.object<File>()
     .instance(File)
     .custom(fileNameValidator(1, 200))
     .custom(fileTypeValidator(['image/jpeg', 'image/png']))
     .custom(fileSizeValidator(5 * 1024 * 1024)) // 5MB
     .messages({
       'filename.min': '文件名太短',
       'filename.max': '文件名太长',
       'filetype.invalid': '不支持的文件类型',
       'filesize.exceeded': '文件大小超过限制'
     });
   

2. 错误处理：为不同的验证错误提供清晰的错误信息，提升用户体验

3. 性能考虑：对于大文件验证，考虑在前端先进行基本验证，再在后端进行完整验证

结论

通过使用Joi的自定义验证器功能，我们可以有效解决React Hook Form中文件上传验证的问题。这种方法不仅解决了直接验证File对象属性时的技术限制，还提供了更灵活、可扩展的验证方案。开发者可以根据实际需求，轻松扩展验证逻辑，确保上传的文件完全符合业务要求。