使用File System Access API移除“所有文件”选项并限制仅支持.json文件

使用File System Access API实现文件上传时，已设置excludeAcceptAllOption: true并指定仅接受.json文件，但实际文件选择器中，.json选项仍被归类在“所有文件(.)”下，无法单独显示JSON文件选项，怀疑application/json参数是否设置错误。

这是部分浏览器对MIME类型的映射逻辑导致的，可尝试以下两种调整方式：

• 给文件类型添加明确描述
  在types数组的对象中增加description字段，为该文件类型指定清晰名称，帮助浏览器识别并单独列出选项：

  types: [
      {
          description: "JSON 文件",
          accept: {
              "application/json": [".json"],
          },
      },
  ]
  

• 替换MIME类型为text/json
  部分浏览器对text/json的识别更友好，可替换原有的application/json尝试：

  accept: {
      "text/json": [".json"],
  }
  

另外需确认浏览器版本完全支持File System Access API，旧版本可能存在兼容性问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Open file</title>
    </head>
    <body>
        <button onclick="getFile()">Open file</button>
        <script>
            const pickerOpts = {
                types: [
                    {
                        description: "JSON Files",
                        accept: {
                            "application/json": [".json"],
                        },
                    },
                ],
                excludeAcceptAllOption: true,
                multiple: false,
            };

            let fileHandle;
            async function getFile() {
                [fileHandle] = await window.showOpenFilePicker(pickerOpts);
                // run code with our fileHandle
            }
            console.log(fileHandle);
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Ivana