是的 /w Formik 文件上传验证

Question

我将 Yup 与 Formik 一起使用，但遇到了问题，我需要验证我的文件上传。验证有效，但我遇到了问题，因为我无法提交没有文件的表单。我需要将其设置为 notRequired，并且因为initialValue 未定义，所以它会测试该未定义的值。

我的代码：

    attachment: Yup.mixed()
        .nullable()
        .notRequired()
        .test("FILE_SIZE", "Uploaded file is too big.", value => value && value.size <= FILE_SIZE)
        .test("FILE_FORMAT", "Uploaded file has unsupported format.", value => value && SUPPORTED_FORMATS.includes(value.type))

Answer 1

这里的问题是两者都.test使其无效。

value => value && value.size <= FILE_SIZE并且value => value && SUPPORTED_FORMATS.includes(value.type)每次都会失败valueisundefined或null，但它不应该按照你所说的那样失败。

所以你需要做一些检查。如果value是null或undefined，则它是有效的，但如果不是，则进行其他检查。

所以你需要的是

attachment: Yup.mixed()
    .nullable()
    .notRequired()
    .test("FILE_SIZE", "Uploaded file is too big.", 
        value => !value || (value && value.size <= FILE_SIZE))
    .test("FILE_FORMAT", "Uploaded file has unsupported format.", 
        value => !value || (value && SUPPORTED_FORMATS.includes(value.type)))