如何将文本文件内容保存到 Javascript 变量？答案

【问题标题】：How to save text file contents to Javascript variable?如何将文本文件内容保存到 Javascript 变量？
【发布时间】：2016-09-18 02:58:05
【问题描述】：

我正在尝试读取超过 150,000 行文本的文本文件。我希望能够读取文本文件并将其作为 processFileContent 的参数传递。

我试过这种方法，但它不起作用。另外，对于这样的大数据，有没有更好的方法来做到这一点？

function readFile(file) {
  var reader = new FileReader();
  reader.onload = function (evt) {
    var data = evt.target.result;
};
  reader.readAsText(file);
  return data;
}

document.getElementById('file').addEventListener('change', readFile, false);

var data = readFile();

function processFileContent(data) {
  var list = data.split('\n');
  ...

【问题讨论】：

“另外，有没有更好的方法来处理如此大的数据？”你的意思是“更好”的数据处理方法吗？
是的，也许是更有效的方法？
不确定processFileContent中会发生什么？尽管您应该能够以一到n行以\n结尾的块读取data，而不是为所有调用.split() data 一通电话。不确定如何衡量“效率”？与其他流程相比？

标签： javascript filereader

【解决方案1】：

FileReader.onload 事件异步返回结果。您可以使用回调或Promise 将result 的result 返回到processFileContent。同样，readFile 处的 file 将是 event 对象，而不是 event.target 的 .files 属性。

function readFile(event) {
  var file = event.target.files[0];
  if (file) {
    new Promise(function(resolve, reject) {
      var reader = new FileReader();
      reader.onload = function (evt) {
        resolve(evt.target.result);
      };
      reader.readAsText(file);
      reader.onerror = reject;
    })
    .then(processFileContent)
    .catch(function(err) {
      console.log(err)
    });
  }
}

document.getElementById('file')
.addEventListener('change', readFile, false);

function processFileContent(data) {
  var list = data.split('\n');
  ...

【讨论】：

【解决方案2】：

您的问题之一是范围界定。您在onload 事件处理程序中将data 声明为局部变量，并尝试从外部函数返回它，其中它是undefined。要解决此问题，您需要将变量声明移出事件处理程序。

您似乎还期望将文件作为事件处理程序的参数，但是事件将Event 对象传递给它们的事件处理程序。要获取文件，您需要获取event.target.files[0]。这应该可以解决它。

function readFile(event) {
    var file = event.target.files[0];  // getting the file Blob
    var reader = new FileReader();
    var data;  // moved declaration
    reader.onload = function (evt) {
        data = evt.target.result;
    };
    reader.readAsText(file);
    return data;
}

【讨论】：