我需要我的profileImgFile是必需的**，并且我希望在我的validationSchema中有类型**。当前验证按预期工作，但是typescript不喜欢validationSchema。
**错误本身：**键入“对象架构〈赋值〈对象形状，{名称：必需字符串架构〈字符串|未定义，任意对象〉;产品说明：必需字符串架构〈字符串|未定义，任意对象〉;配置文件图像文件：“混合架构<...>; }〉，任何对象，形状类型，<...>Assert形状<...>〉"不能赋给类型”ObjectSchemaOf〈IForm，never〉“。”
从我在文档中读到的共识是使用yup mixed。另一个解决方案是使用Yup.object（），但你必须处理文件属性。
profileImgFile: Yup.mixed().required("Required")
// Another possible solution
profileImgFile: Yup.object({
// somehow spread all files Properties, or FileList properties.
}).required("Required")下面是一个工作示例code-sandbox
interface IForm {
name: string;
description: string;
profileImgFile: File;
}
const validationSchema: Yup.SchemaOf<IForm> = Yup.object().shape({
name: Yup.string().required("Required"),
description: Yup.string().required("Required"),
profileImgFile: Yup.mixed().required("Required")
});
const {
register,
handleSubmit,
control,
reset,
formState: { errors }
} = useForm<IForm>({
resolver: yupResolver(validationSchema)
});
<Controller
name="profileImgFile"
control={control}
render={({ field }) => (
<input
ref={fileInputRef}
type="file"
id="avatar"
onChange={(val) => {
field?.onChange(val?.target?.files);
}}
name="profileImgFile"
accept="image/png, image/jpeg"
/>
)}
/>
1条答案
按热度按时间nwnhqdif1#
如果我们从一个基本的文件输入开始，它将绑定一个
FileList示例。使用这种方法，
profileImgFile必须声明为FileList，如下面的IForm所示。我知道您只需要一个文件，但在代码中处理下游文件应该相当简单。在测试了很多其他方法之后，我在我的应用程序中找到了一个
Yup.mixed().test()方法，如下所示。