在 NextJs 中使用 Yup 验证文件输入-解网

问：

我在 yup 架构中有一个可选的文件输入，我想验证它的大小和文件类型。问题是 HTML 输入类型文件正在向测试函数发送一个 Files 数组，并且它弄乱了架构，因为 medicalConcernDocument 在我的界面中应该只为 File 类型。下面是文件是的架构

const schema: up.ObjectSchema<PersonalDetailsFormInterface> = yup.object().shape({
    ...,
    medicalConcernDocument: yup
    .mixed<File>()
    .nullable()
    .test(
      'check-file-size',
      `File size cannot exceed ${maxFileSizeInMB}MB`,
      checkFileSize
    )
    .test(
      'check-file-type',
      `File is unsupported, supported files: ${supportedFileTypeMessage}`,
      checkFileType
    ),
});

checkFileSize 和 checkFileType 位于如下所示的实用程序文件中：

export function checkFileSize(files: File[] | null | undefined): boolean {
  const file = getFile(files);
  if (!file) {
    return true;
  }

  const fileSizeInBytes = file.size;
  const fileSizeInMB = Math.round(fileSizeInBytes / 1024 / 1024); 
  return (fileSizeInMB <= maxFileSizeInMB);
}

export function checkFileType(files: File[] | null | undefined): boolean {
  const file = getFile(files);
  if (!file) {
    return true;
  }

  return supportedFileTypes.includes(file.type);
}

现在我知道我可以轻松地将 checkFileSize/checkFileType 参数设置为 files： any，然后将 any 设置为 File[]，如下所示：

export function checkFileSize(files: any | null | undefined): boolean {
  const file = getFile(files as File[]);
  if (!file) {
    return true;
  }
  ...
}

但是有没有更好的方法可以做到这一点呢？

下一个.js 是的

如果你检查我写的第一个代码块，我们不会在测试中触发 checkFileSize 方法，而是将其作为参数传递，所以我不能只是“首先将项目交给它”......HTML 输入元素传递一个文件对象数组 -> YUP 通过将输入发送到我们的验证方法 e.i checkFileSize 来验证输入上的任何内容。真正的问题是，如果我的 yup 属性类型为 mixed<File>那么验证方法参数也需要为 File 类型，这会导致问题。

1赞 Arash jahan bakhshan 11/9/2023

我所说的“第一个地方”是指您要将文件传递给架构的位置。无论如何，也许您可以使用之前？.transform.mixed.transform(files => files[0])

0赞 Robin Dalmy 11/9/2023

啊，我现在明白你的意思了。我不知道是的......我会尽可能地尝试一下，但我很确定这就是我要找的。感谢您的澄清！.transform

答： 暂无答案

上一个：TypeScript 在使用 .required（）时推断 Yup 架构的可选字段

下一个：如何根据输入内容验证 React Formik 表单？

在 NextJs 中使用 Yup 验证文件输入

Validate File input using Yup in NextJs

评论