是的，使用 TypeScript 验证文件

Question

我想为输入类型=“文件”中收到的图像编写验证，但我收到 AnyPresentValue 错误。这是什么？为什么当我将鼠标悬停在“value.size 或 type”上时会出现错误？

错误：

TS2339：类型 AnyPresentValue 上不存在属性大小

formValidationSchema.ts

import * as yup from 'yup';

const FILE_SIZE = 160 * 1024;
const SUPPORTED_FORMATS = [
    "image/jpg",
    "image/jpeg",
    "image/gif",
    "image/png"
];

export const betFormValidationSchema = yup.object().shape({
    title: yup
        .string()
        .required('Required field'),

    desc: yup
        .string()
        .required('Required field')
        .min(15, 'Not shorter than 15 characters!')
        .max(3000, 'No longer than 3000 characters!'),

    image: yup
        .mixed()
        .required("A file is required")
        .test(
            "fileSize",
            "File too large",
            value => value && value.size <= FILE_SIZE
        )
        .test(
            "fileFormat",
            "Unsupported Format",
            value => value && SUPPORTED_FORMATS.includes(value.type)
        ),
});

我的组件具有“输入类型='文件'”

interface ImageFormProps {
    name: string;
    onSubmit: (image: File) => void;
}

const ImageForm:FC<ImageFormProps> = ({ onSubmit, name }) => {
    const [imagePreview, setImagePreview] = useState<string | null>(null);

    const handleImageChange = (event:ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files && event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onloadend = () => {
                setImagePreview(reader.result as string);
            };
            reader.readAsDataURL(file);
            onSubmit(file);
        }
    };

    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <input
                type="file"
                name={name}
                accept="image/png, image/jpeg, image/webp"
                onChange={handleImageChange}
                style={{color: 'white'}}
            />
            {imagePreview && (
                <img src={imagePreview} alt="Preview" style={{ maxWidth: '200px', marginTop: '1rem' }} />
            )}
        </Box>
    );
};

export default ImageForm;

我的图像不想以任何方式得到验证。请帮助我
我尝试了很多方法但没有任何效果

Answer 1

请查看如何使用打字稿验证 Yup 文件上传。

基本上，您可以在mixed()函数上定义抽象类型。

document: Yup.mixed<File>() 👈
    .required()
    .test('fileSize', i18n.t('medical.form.max.size'), (value) => {
      console.log('*******', value);
      if (!value) {
        return true;
      }
      return value.size < 1000000;
    }),