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[];
}

这是 accept-key 的预期类型。

对于为什么会收到奇怪的错误消息有什么想法吗？ （我还在那一行停用了 TS，并收到了同样的消息。）

由于某些原因，代码仍然可以正常工作......所以其他不是图像的文件被接受了...... 感谢任何帮助 - 干杯！

- user18472307

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

这在文档的浏览器限制部分有解释，可参考文档。

- Moath

Answer 2

来自文档

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

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

我建议修改您上述的代码为：

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

- arfi720

---

哦，原来如此简单。你是个传奇，谢谢！ - user18472307