在我的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"/>
)}
</>
)
}
1条答案
按热度按时间gblwokeq1#
你必须为它设置formik值来验证。在handleOnImageChange函数中，您正在调用upload image函数，在我的理解中，该函数通过API端点上传图像并提供URL作为响应。让这个函数Async等待响应，然后设置状态，让我给予你一个示例代码
你将不得不检查为空或未定义的情况下，该文件是不是由用户选择和空对象返回时，用户打开文件输入和取消选择的文件。