React-Dropzone，接受的文件 MIME 类型错误

Question

出于显而易见的原因，我目前正在构建一个 React 放置区，但我收到了那些奇怪的错误：

Skipped "accepted" because it is not a valid MIME type. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types for a list of valid MIME types.

您可以定义数据类型，dropzone 将接受该数据类型。看起来如下：

useDropzone({
    accept: { accepted: ['image/png', 'image/jpeg'] },
    maxFiles: 1,
    multiple: false,
    onDrop: (acceptedFiles) => {
      setFiles(
        acceptedFiles.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file)
          })
        )
      );
    }
  });

在那里您还可以看到接受密钥，我从中收到错误消息。由于 TypeScript，它具有奇怪的语法：

export interface Accept {
  [key: string]: string[];
}

这是接受密钥的预期类型。

关于为什么我收到这个奇怪的错误消息有什么想法吗？（我也在该行停用了 TS 并收到了相同的消息。

出于某种原因，代码仍然有效...因此接受其他非图像文件... 很高兴得到任何帮助 - 干杯！

Answer 1

来自documentation

useDropzone({
  accept: {
    'image/png': ['.png'],
    'text/html': ['.html', '.htm'],
  }
})

我在任何地方都看不到描述像 accept: {accepted: ['...']}

这样的结构的地方

我想将上面的代码更改为：

accept: {
  'image/png': ['.png'], 
  'image/jpeg': ['.jpg', '.jpeg'] 
},

Answer 2

@arfi720 的答案确实适用于某些浏览器，但如果您尝试接受 .png、.jpeg 和 .jpg 并遵循文档，它将不起作用。

这是一个例子

// Does not work

  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      'image/png': ['.png'],
      'image/jpg': ['.jpg'],
      'image/jpeg': ['.jpeg'],
    },
  });

// Does work

  const { getRootProps, getInputProps } = useDropzone({
    accept: {
     'image/*': ['.jpeg', '.jpg', '.png'],
    },
  });

这在 documentation

的 浏览器限制 部分进行了解释

React-Dropzone，接受的文件 MIME 类型错误

React-Dropzone, accepted files MIME type error

reactjs

typescript

types

mime-types

react-dropzone