如何在 zod 中为文件类型 `Record<string, File>` 创建类型

Question

我使用输入 type="file" 而不是在 FileData 中保存数据，我只使用普通对象并为其创建了一个类型：Record<string, File>。它运行良好，但是当我尝试使用 zod 创建验证器时 – 我不知道如何为它创建相同的类型。

用法：

import { object as zodObject, string, number } from 'zod';
import { useValidators } from '../some';

const useValidation = () => {
  const { createResolver } = useValidators();
  
  return {
    resolver: createResolver(
      zodObject({
        name: string(),
        price: number(),
        files: ???,  
      })
    ),
  };
};

文档太过分了，但我找不到适合我的案例的示例：https://github.com/colinhacks/zod

输入的用法：


const App = () => {
  const [files, setFiles] = useState<Record<string, File>>({}); 

  return (
    <input 
      type="file" 
      onChange={event => {
        const files = event.target.files;
        const newFiles: Record<string, File> = {};
        const keys = Object.keys(files);
        
        for(let i = 0; i < keys.length; i++) {
          const file = newFiles[key];
          newFiles[file.name] = file;
        }

        setFiles(newFiles);
      }}
    />

  )

}

Answer 1

我的同事找到了解决方案：

// useValidation file
import { object as zodObject, string, number, record, any } from 'zod';
import { useValidators } from '../some';

const useValidation = () => {
  const { createResolver } = useValidators();
  
  return {
    resolver: createResolver(
      zodObject({
        name: string(),
        price: number(),
        files: record(any()).nullable(),  
      })
    ),
  };
};

在使用带有文件数据的对象的文件中，我们这样使用：

// fileInput on `onRemove` action return `fileName: string` and my file object looks like this:  { fileName: File } 

const [files, setFiles] = useState<Record<string, File> | null>(null);

<FileInput 
  onChange={(fileName) => {
    const updatedFiles = { ...files as Record<string, File> }; 
    delete updatedFiles[fileName];
    setFiles(updatedFiles);
  }}
/>

Answer 2

zod架构：

  file:
    typeof window === "undefined"
      ? z.string()
      : record(any()).nullable(),

初始值：

file: "undefined",

Answer 3

也许z.instanceof可以解决？

如果您想验证文件类型...

z.instanceof (File)

或者，对于 FileList 类型...

z.instanceof (FileList)

https://github.com/colinhacks/zod/issues/387

如何在 zod 中为文件类型 `Record<string, File>` 创建类型

How to create a type for file type `Record<string, File>` in zod

javascript

input-type-file

typescript

reactjs

zod