reactjs 使用带有单独组件的Yup和Formik进行图像上传验证

cl25kdpy  于 2023-05-28  发布在  React
关注(0)|答案(1)|浏览(139)

在我的Nextjs应用程序中,我试图通过在组件中传递方法handleOnImageChange来验证Formik和Yup的图像上传,但我不知道如何让它以这种方式工作。我也试过useFormikContext,但没有成功。有人能帮帮我吗

const validationSchema = yup.object().shape({
        file: yup.mixed().required('Please upload an image')
    });

 function handleOnImageChange(event) {
      const file = event.currentTarget.files[0];
      uploadImage(file);
  }

<Formik
  onSubmit={handleSubmit}
  initialValues={defaultFormState}
  validationSchema={validationSchema}
>
  {() => (
    <>
    <div>
     <Uploader imageSrc={imageSrc} handleOnImageChange={handleOnImageChange} />
     <ErrorMessage
       name="file"
       component={InputError}
      />
    </div>
    </>
  )}
</Formik>

使用uploader组件:

const Uploader = ({handleOnImageChange, imageSrc}) => {
  return (
    <>
      <input id="file" accept=".jpg, .jpeg, .png, .gif, .webp" name="file" type="file" onChange={handleOnImageChange} />
      {imageSrc && (
        <img src={imageSrc} width="200"/>
      )}
    </>
  )
}
gblwokeq

gblwokeq1#

你必须为它设置formik值来验证。在handleOnImageChange函数中,您正在调用upload image函数,在我的理解中,该函数通过API端点上传图像并提供URL作为响应。让这个函数Async等待响应,然后设置状态,让我给予你一个示例代码

const validationSchema = yup.object().shape({
        file: yup.mixed().required('Please upload an image')
    });

 function async handleOnImageChange(event,formik) {
      const file = event.currentTarget.files[0];
     let res = await uploadImage(file);
let url =res.data.url // depends on your API response
formik.setFieldValue("file",url)//"file indicates you state or formik value

  }

<Formik
  onSubmit={handleSubmit}
  initialValues={defaultFormState}
  validationSchema={validationSchema}
>
  {(formik) => (
    <>
    <div>
     <Uploader imageSrc={formik.values.file} handleOnImageChange={(e)=>handleOnImageChange(e,formik)} />
     <ErrorMessage
       name="file"
       component={InputError}
      />
    </div>
    </>
  )}
</Formik>

你将不得不检查为空或未定义的情况下,该文件是不是由用户选择和空对象返回时,用户打开文件输入和取消选择的文件。

相关问题