Yup.mixedtest在React中无法与Formik一起使用

问题描述

我已经创建了一个表单，并接受了一些诸如StudentName，photo等的输入。我想验证这些输入。为此，我正在使用Formik＆Yup。

1. studentName：-至少3个字符，仅允许使用A-Za-z字符
2. 照片：-文件不能超过1mb，仅允许jpeg和png文件类型

对StudentName的验证可以正常工作，但不适用于照片。当我尝试上传文件时，即使我上传的文件大于1mb，由于上传的文件太大，它总是会报错。简而言之，以下条件不起作用。

photo: Yup.mixed()
  .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))
  )

SanBox网址：https://codesandbox.io/s/ecstatic-mountain-gol1l

import "bootstrap/dist/css/bootstrap.min.css";
import { ErrorMessage,Field,Form,Formik } from "formik";
import React from "react";
import * as Yup from "yup";

export default function App() {
  const FILE_SIZE = 1000000; //1mb
  const SUPPORTED_FORMATS = [
    "image/jpg","image/jpeg","image/png"
  ];

  return (
    <div className="App">
      <Formik
        initialValues={{
          studentName: "",photo: null
        }}
        validationSchema={Yup.object().shape({
          studentName: Yup.string()
            .min(3,"Name cannot be less than 3 characters")
            .matches(/^[A-Za-z ]*$/,"Please enter valid name")
            .required("Student Name is required"),photo: Yup.mixed()
            .required("A file is required")
            .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))
            )
        })}
        render={({ errors,touched }) => (
          <Form>
            <div className="form-group">
              <label className="col-sm-4 control-label">Student Name</label>
              <div className="col-sm-8">
                <Field
                  id="studentName"
                  name="studentName"
                  type="text"
                  className={
                    "form-control" +
                    (errors.studentName && touched.studentName
                      ? " is-invalid"
                      : "")
                  }
                />
                <ErrorMessage
                  name="studentName"
                  component="div"
                  className="invalid-Feedback"
                />
              </div>
            </div>
            <div className="form-group">
              <label className="col-sm-4 control-label">Photo</label>
              <div className="col-sm-8">
                <Field
                  id="photo"
                  name="photo"
                  type="file"
                  className={
                    "form-control" +
                    (errors.photo && touched.photo ? " is-invalid" : "")
                  }
                />
                <ErrorMessage
                  name="photo"
                  component="div"
                  className="invalid-Feedback"
                />
              </div>
            </div>
          </Form>
        )}
      />
    </div>
  );
}

解决方法

我不知道您是否已解决此问题，但在我看来，问题在于此行

(value) => !value || (value && value.size >= FILE_SIZE)

如果value.size小于FILE_SIZE（不大于您的代码），则应返回true。