使用 React-Hook-Form 和 Yup 验证文件（<x> 必须是 `object` 类型，但最终值为：`null`）

Question

我正在使用 react-hook-form 制作一个简单的文件上传表单，我需要验证是否已选择要上传的文件。使用 yup 进行验证。我意识到关于这个主题还有其他问题，但我找不到可行的解决方案。

我的文件上传组件基于（几乎 100% 相同）这个答案。它似乎工作得很好，如果我禁用验证文件正确上传。

我遇到的问题是在验证是否已选择文件时我收到错误 file must be a 'object' type, but the final value was: 'null'.

这里 CodeSandbox 显示了问题。我添加了一些打印件，显示“文件”形式的内容属性及其类型（显示为对象）

Answer 1

使用下面的模式验证，它应该按预期工作。

 const fileFormSchema = yup.object().shape({
    file: mixed()
          .test("required", "You need to provide a file", (file) => {
            // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
            if (file) return true;
            return false;
          })
          .test("fileSize", "The file is too large", (file) => {
            //if u want to allow only certain file sizes
            return file && file.size <= 2000000;
          })
      });

使用 React-Hook-Form 和 Yup 验证文件（<x> 必须是 `object` 类型，但最终值为：`null`）

Validating File using React-Hook-Form and Yup (<x> must be a `object` type, but the final value was: `null`)

reactjs

react-hook-form

yup