reactjs - 是的/使用 Formik 文件上传验证

Question

我在 Formik 上使用 Yup，但遇到了问题，我需要验证我的文件上传。验证有效，但我遇到了问题，因为我无法在没有文件的情况下提交表单。我需要使它 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)每次都会失败value是 undefined或 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)))