是的，React-Hook-Form 中的文件上传验证问题

问题描述

我尝试以反应钩子形式验证图像上传，是的。此验证适用于图像文件。但任何人尝试上传 .txt、.pdf、.docx、.csv、.xlsx 或其他文件，然后验证无法正常工作，也仍然显示以前的错误消息。这是我的代码 -

const SUPPORTED_FORMATS =['image/jpg','image/jpeg','image/png']
    const schema = yup.object().shape({
    bank_img: yup.mixed()
    .test("required","Bank image is a required field",(value) => {
        return !value || value.length > 0;
    })
    .test('type','Invalid image format,supported image format are .jpg,.jpeg and .png',(value) =>{
        return value === null || (value && SUPPORTED_FORMATS.includes(value[0]?.type))
    })
    });


const Add = () => {
    const { register,handleSubmit,formState:{ errors } } = useForm({
        resolver: yupResolver(schema)
    });
    const onSubmit = data =>{
    console.log(data);
    }
    return (
        <>
                <form onSubmit = {handleSubmit(onSubmit)}>
                            <div>
                            <input 
                                type="file" 
                                className="form-control-file" 
                                {...register('bank_img')}
                            />
                            <p className='text-danger'>{errors.bank_img?.message}</p>
                            </div>
                      
                
                        <button className="btn btn-primary" type='submit'>
                            Submit
                  </button>
                </form>
        </>
    )
}

export default Add

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）