是的 /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) 每次 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)))

Answer 2

您可以使用 'useRef' 来访问文件大小。

import React, { useRef } from 'react'
import { Field, ErrorMessage, useFormik, Formik, Form } from 'formik'

    const filesharhe_ref = useRef()
        const validationSchema = Yup.object({
                myfile: Yup.mixed().test('FILE_SIZE', "Uploaded file is too big."
                ,(value) => {
                   return(
                    value && filesharhe_ref.current ?
                        (filesharhe_ref.current.files[0].size<=FILE_SIZE? true: false)
                         : true)
                }),
            })
    
    <!-- Component-->

    <Field innerRef={filesharhe_ref} type="file" name="myfile" />
    <ErrorMessage name='myfile'  />

别忘了定义 FILE_SIZE.

您还可以检查文件格式：

Yup.mixed().test('FILE_SIZE', "Uploaded file is too big."
                ,(value) => {
                   return(
                    value && filesharhe_ref.current ?
                        (filesharhe_ref.current.files[0].size<=FILE_SIZE? true: false)
                         : true)
                }).test(
                'FILE_Type', "Not valid!"
                , (value) => {
                    console.log(filesharhe_ref.current.files[0])
                    return (
                        value && filesharhe_ref.current ?
                            (SUPPORTED_FORMATS.includes(filesharhe_ref.current.files[0].type) ? true : false)
                            : true)
                }
            )

是的 /w Formik 文件上传验证

Yup /w Formik File Upload Validation

reactjs

yup

formik