是的 /w Formik 文件上传验证答案

【问题标题】：Yup /w Formik File Upload Validation是的 /w Formik 文件上传验证
【发布时间】：2020-06-22 13:33:27
【问题描述】：

我将 Yup 与 Formik 一起使用，但我遇到了问题，我需要验证我的文件上传。验证有效，但我遇到了问题，因为我无法在没有文件的情况下提交表单。我需要让它不是必需的，因为 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))

【问题讨论】：

标签： reactjs formik yup

【解决方案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)))

【讨论】：

【解决方案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)
                }
            )

【讨论】：