Chrome 应用文件阅读器

Question

我正在尝试在 Chrome 应用程序中使用文件系统 API。我已经尝试了我能找到的所有示例代码，但无法读取简单的文本文件。我几乎记录了每一步，似乎发生（或没有发生）的是我第一次引用文件 reader 对象时一切都停止了。它创建得很好，因为我可以记录 .readyState，但在那之后我似乎甚至无法设置 onload() 事件或执行 .readAsText()。

这是我通过按钮调用的内容：

 function clickButton(){

  chrome.fileSystem.chooseEntry({type: 'openFile', acceptsMultiple: false}, function(FileEntry){
    if(chrome.runtime.lastError) {console.warn("Warning: " + chrome.runtime.lastError.message);}
    else{
      console.log(FileEntry);
      var thing = new FileReader();
      console.log(thing.readyState);
      thing.onloadstart(function(){
        console.log("Started loading " & FileEntry);
      });
      console.log("added onloadstart");
      console.log(thing.readyState);
      console.log(thing);
      thing.readAsText(FileEntry);
      console.log(thing.readyState);
      console.log(thing.result);
    }
  });

  document.getElementById("status").innerHTML = "I did something";
 }

我确实在某处读到 Chrome 不允许访问本地文件，但 chrome 应用程序似乎有所不同。至少，文档似乎暗示了这一点。

我最终在控制台中得到的唯一东西是 FileEntry 对象。

https://developer.chrome.com/apps/app_storage#filesystem

我已经使用了上面的示例代码 link，但仍然无法正确使用。其他人有这个问题或知道我做错了什么吗？

Answer 1

试试这个代码...

<!doctype html>
<html>
<script>
function handle_files(files) {
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    var reader = new FileReader()
    ret = []
    reader.onload = function(e) {
      console.log(e.target.result)
    }
    reader.onerror = function(stuff) {
      console.log("error", stuff)
      console.log (stuff.getMessage())
    }
    reader.readAsText(file) //readAsdataURL
  }

}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>

Answer 2

FileEntry 和 File 是有区别的。您需要调用 FileEntry 的 .file() 方法。所以，替换

thing.readAsText(FileEntry);

与

FileEntry.file(function(File) {
  thing.readAsText(File)
})

https://developer.mozilla.org/en-US/docs/Web/API/FileEntry#File

Answer 3

我编写了一个从文件中提取文本的函数。

  function getFileEntryText(fileEntry) {
    return new Promise(function (resolve, reject) {
      fileEntry.file(function (file) {
        var fileReader = new FileReader();
        fileReader.onload = function (text) {
          resolve(fileReader.result);
        };
        fileReader.onerror = function () {
          reject(fileReader.error);
        };
        fileReader.readAsText(file);
      });
    });
  }

您可以像这样调用此方法：

getFileEntryText(fileEntry).then(function(text) {
      // Process the file text here
}, function(error) {
   // Handle the file error here
});

我在使用文件系统时遇到的一件事是每个调用都是异步的。具有多层嵌套回调会使代码难以阅读。我目前正在通过将我能做的一切转换为 Promise 来解决这个问题。

Answer 4

对于任何有兴趣的人，这里是我的最终（工作）代码，包含我需要遵循所有这些回调的所有 console.log()。

var chosenEntry = null;

 function clickButton(){
    console.log("Button clicked");
    var accepts = [{
      mimeTypes: ['text/*'],
      extensions: ['js', 'css', 'txt', 'html', 'xml', 'tsv', 'csv', 'rtf']
    }];
    chrome.fileSystem.chooseEntry({type: 'openFile', accepts: accepts}, function(theEntry) {
      if (!theEntry) {
        output.textContent = 'No file selected.';
        return;
      }
      // use local storage to retain access to this file
      chrome.storage.local.set({'chosenFile': chrome.fileSystem.retainEntry(theEntry)});
      console.log("local data set.  calling loadFileEntry");
      loadFileEntry(theEntry);
      console.log("loadFileEntry called, returned to clickButton()");
    });
 }

 function loadFileEntry(_chosenEntry) {
  console.log("entered loadFileEntry()");
  chosenEntry = _chosenEntry;
  chosenEntry.file(function(file) {
    readAsText(chosenEntry, function(result) {
      console.log("running callback in readAsText");
      document.getElementById('text').innerHTML = result;
      console.log("I just tried to update textarea.innerHTML");
    });
  });
  console.log("added function to chosenEntry.file()");
 }

function readAsText(fileEntry, callback) {
  console.log("readAsText called");
  fileEntry.file(function(file) {
    var reader = new FileReader();
    console.log("Created reader as FileReader");
    reader.onload = function(e) {
      console.log("called reader.onload function");
      callback(e.target.result);
    };
    console.log("calling reader.readAsText");
    reader.readAsText(file);
  });
}

Chrome 应用文件阅读器

Chrome App FileReader

google-chrome-app

filereader