时间戳

首页 > 解决方案 > filepond 不适用于 safari 中的 video/* 类型

filepond - filepond 不适用于 safari 中的 video/* 类型

问题描述

我在 react 中使用FilePond 库，它在 chrome 中运行良好，但在 safari 中不行。我的问题是：

当我设置acceptedFileTypes={['video/*']}

  1. 在 chrome 中 - 它接受所有视频类型。
  2. 在 safari - 它只接受mov文件，而不是所有视频类型的文件。

当我设置时acceptedFileTypes={['video/mp4']}：它对两者都执行预期的行为，并且只接受 mp4 文件。

我不想设置所有可能的视频类型，而是想使用video/*过滤器。

Safari 版本：13.1.1

<FilePond
  ref={fileRef}
  files={files}
  allowMultiple={false}
  labelIdle={labelIdle}
  className="video"
  instantUpload={false}
  onupdatefiles={(items) => {
    setFiles(items)
  }}
  onremovefile={() => toggleDisplayProgress(false)}
  acceptedFileTypes={['video/*']}
  required
/>

我可以在这里专门设置视频类型 - https://trac.webkit.org/browser/trunk/Source/WebCore/platform/MIMETypeRegistry.cpp如本票所述

标签： filepond

解决方案

浏览器并非都以相同的方式检测文件。根据操作系统，这可能会有所不同。fileValidateTypeDetectType钩子有助于检测正确的类型。您可以使用它根据（例如）文件扩展名手动设置正确的类型。

FilePond.create(document.querySelector('input'), {
    acceptedFileTypes: ['image/png'],
    fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
        
        // Do custom type detection here and resolve promise

        resolve(type);
    })
});

请参阅：https ://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/#custom-type-detection

推荐阅读