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

Question

我\xc2\xb4m 目前正在构建一个反应放置区，原因很明显，但我收到了这些奇怪的错误：

\n

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.\n

\n

您可以定义拖放区将接受的数据类型。\n它如下所示：

\n

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

\n

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

\n

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

\n

\xc2\xb4 是接受键的预期类型。

\n

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

\n

由于某种原因，代码仍然有效...所以其他文件，即 \xc2\xb4t 图像被接受...\n很高兴获得任何帮助 - 干杯！

\n

Answer 1

@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'],
    },
  });

文档中的浏览器限制部分对此进行了解释

Answer 2

从文档中

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

我看不到任何描述类似结构的地方accept: {accepted: ['...']}

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

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