如何在 Native File System API 中读取文件内容答案

【问题标题】：How to read a file content in Native File System API如何在 Native File System API 中读取文件内容
【发布时间】：2020-09-18 08:43:55
【问题描述】：

我正在尝试读取 XML 文件的内容。可能这是基本的 JS 东西，但我似乎无法让它工作。

我正在使用 Chrome 的实验性 Native File System API 来读取文件夹中的文件夹：

const opts = {type: 'open-directory'};
handle = await window.chooseFileSystemEntries(opts);
const entries = await handle.getEntries();
...

然后，稍后在代码中，我从主目录输入其中一个文件夹并尝试读取其中的文件。文件系统结构如下：

Directory > subdirectory > file

代码的第二部分如下所示：

var subdirHandle = await handle.getDirectory(oneOfTheFolders);
var xmlFile = await subdirHandle.getFile('subject.xml');
xmlDoc = domParser.parseFromString(xmlFile, "text/xml");    
parsedNumber = document.evaluate(myXpathFce('nodeInXML'), xmlDoc, null, XPathResult.ANY_TYPE, null).iterateNext();
if(parsedNumber.childNodes.length >0){
...

我相信问题出在var xmlFile = await subdirHandle.getFile('subject.xml'); 与文件读取。如果我直接从输入加载文件并使用FileReader()，我能够获取内容并解析它，但是使用“目录”方法我得到空值（对于评估的文档），就像这样Uncaught (in promise) TypeError: Cannot read property 'childNodes' of null

Edit 这是我在控制台中获得的 xmlFile 变量。我只需要从中获取内容（文本格式的 XML）

【问题讨论】：

你能把 subject.xml 文件的内容贴出来，让我们看看为什么 xml 的结构无效吗？
只是为了让您同时朝着正确的方向前进。 myXpathFce('nodeInXML') 函数返回在 XML 文档中找不到的 XPath。
xpath 已经过测试并且运行良好（如果通过输入以标准方式加载 xml）。 xpath 是这样的（那里的命名空间）：//*[local-name()='name'][contains(., 'Comments')]/following-sibling::*[local-name()='data'] 和 xml 部分：<field><name>Comments</name><data>123</data></field>

标签： javascript file google-chrome dom native-file-system-api-js

【解决方案1】：

我注意到您将 File 对象保存在 xmlFile 变量中，并将其直接传递给 parseFromString 方法。

您不能直接从 File 对象解析 document 对象。您应该首先使用 FileReader 从 File 对象中读取 string。您可以使用下面的 readFileAsync 函数从带有 await 关键字的 File 对象中读取 string：

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsText(file);
  })
}

var file = await handle.getFile();
var text = await readFileAsync(file);
var xmlDoc = domParser.parseFromString(text, "text/xml");

【讨论】：

感谢您的回答。如前所述，我在测试 FileReader 时没有运气。似乎文件的格式与直接从输入加载时不同。您的代码返回：Uncaught (in promise) TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
这很奇怪，我可以使用以下代码读取我的 xml 文件：cdpn.io/wesselkroos/debug/rNOXKNe 那里仍然出现同样的错误吗？
试过你的代码，我得到的只是文件夹或文件的名称。在我也可以工作的代码中，我无法做的是读取在这种情况下位于子目录中的该文件的内容。请在最后查看已编辑的问题。
@koubin 啊，显示的文件/文件夹的名称上有点击事件监听器。您应该能够单击要打开的文件，然后它将读取该文件并将 parsedNumber 记录到控制台。
谢谢，当我查看您的代码时我意识到了这一点：-) 在这种情况下它运行良好，但是当我尝试其中的子文件夹和特定文件时，它仍然会引发提到的错误。您能否尝试修改您的示例，以便当用户单击“读取目录”按钮时，它将转到例如第一个找到的子目录，并且它将获取特定文件“subject.xml”。我的意思是我的这部分代码可能会导致问题：var subdirHandle = await handle.getDirectory(adresar); var xmlSoubor = await subdirHandle.getFile('subject.xml');

【解决方案2】：

要获取FileSystemFileHandle 的内容，请调用getFile()，它会返回一个包含一个blob 的File 对象。要从 blob 中获取数据，请调用其方法之一（slice()、stream()、text()、arrayBuffer()）。

【讨论】：