使用 Formik/Yup 的可选文件验证答案

【问题标题】：Optional file validation with Formik/Yup使用 Formik/Yup 的可选文件验证
【发布时间】：2019-10-05 12:05:35
【问题描述】：

如果选择了文件，我想验证文件输入，我找到了 Formik/Yup 的解决方案，但即使没有选择文件，它也会验证。

avatar: Yup.mixed()
    .test("fileSize", "File is too large", value => {
      return value && value.size <= FILE_SIZE;
    })
    .test(
      "fileFormat",
      "Unsupported Format",
      value => value && SUPPORTED_FORMATS.includes(value.type)
    )

当我输入其他输入时它会触发验证，我只想在文件存在时触发它，因为头像是可选的！

【问题讨论】：

可以分享代码沙箱吗？ Formikdoes not support file upload，那你用的是什么方法？
你试过notRequired() 吗？

标签： reactjs forms formik yup

【解决方案1】：

问题是测试仅在value 存在时才返回true（意味着它验证）。您必须添加一个条件来接受不存在的值（即：是null 或undefined）。

我遇到了完全相同的问题，我这样解决了：

avatar: Yup.mixed()
  .test(
    "fileSize",
    "File is too large",
    value => !value || (value && value.size <= FILE_SIZE)
  )
  .test(
    "fileFormat",
    "Unsupported Format",
    value => !value || (value => value && SUPPORTED_FORMATS.includes(value.type))
  )

【讨论】：