迹忆客 专注技术分享

本文将介绍使用 Vanilla JS 和 JavaScript 框架 Node.js 使用 JavaScript 读取文件的方法。

我们可以创建一个简单的 JavaScript 函数来读取作为 HTML 输入放入的本地文件。

我们可以使用 input HTML 标签来上传文件，并使用函数 FileReader() 从文件中逐行读取内容。

代码示例：

<input type="file" name="file" id="file" />

document.getElementById('file').onchange = function(){
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent){
    console.log(this.result);
  };
  reader.readAsText(file);
};

在这里，输入字段由 getElementById 方法选择，该方法将在更改时触发该函数（无论何时选择文件）。我们创建对象 FileReader() 的新实例。当实例 reader.onload 被触发时，一个带有参数 progressEvent 的函数被调用，我们可以在控制台上将文件的全部内容打印为 console.log(this.result)。

我们可以扩展函数来逐行读取文件内容，如下图。

document.getElementById('file').onchange = function(){
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent){
    var fileContentArray = this.result.split(/\r\n|\n/);
    for(var line = 0; line < lines.length-1; line++){
      console.log(line + " --> "+ lines[line]);
    }
  };
  reader.readAsText(file);
};

前一个方法的扩展片段使用 split() 来拆分 result 变量读取的内容并将其存储到数组 fileContentArray 变量中。然后使用 for 循环遍历 fileContentArray 变量的每一行并逐行打印文件内容。

出于测试目的，我们创建了一个 demo.txt 文件，其中包含以下内容。

Line 1
Line 2
Line 3

Line 5

现在，我们可以看到文件有五行，从 HTML Input 元素上传文件时，我们可以看到文件的内容，如下面的输出所示。

输出：

1 --> Line 1
2 --> Line 2
3 --> Line 3
4 --> 
5 --> Line 5

我们可以忽略内容 1 --> 因为它是为了可视化文件的行号。

我们应该确保我们已经安装了 Node 来使用这个方法。我们可以通过在终端或命令提示符中键入 node -v 来检查。我们现在可以使用 readline 模块轻松读取文件的内容。我们创建一个文件 app.js, 并在文件 app.js 的第一行，我们导入模块，如下所示。

const readline = require('readline');
const fs = require('fs');

由于 readline 模块内置在 Node.js 中，我们没有明确安装它。我们可以使用 fs 模块来创建可读流。这是因为 readline 模块仅与可读流兼容。

示例代码：

const readLine = require('readline');
const f = require('fs');
var file = './demo.txt';
var rl = readLine.createInterface({
    input : f.createReadStream(file),
    output : process.stdout,
    terminal: false
});
rl.on('line', function (text) {
 console.log(text);
});

我们可以将文件 app.js 保存到与文件 demo.txt 相同的文件夹中，然后使用命令 node app.js 运行。

输出：

Line 1
Line 2
Line 3

Line 5

我们可以使用 Node.js line-reader 模块在 JavaScript 中读取文件。该模块是开源的，我们需要使用 npm install line-reader --save 或 yarn add line-reader 命令来安装它。

使用 line-reader 模块读取文件内容很容易，因为它提供了 eachLine() 方法。它让我们一行一行地读取文件。我们可以在我们的文件 app.js 的顶部将它导入为 const lineReader = require('line-reader')。

eachLine() 方法采用带有两个参数的回调函数。参数是 line 和 last。选项 line 存储内容，选项 last 告诉读取的行是否是文件中的最后一行。第二个选项代表一个布尔值。

示例代码：

const lineReader = require('line-reader');
lineReader.eachLine('./demo.txt',(line,last)=>{
    console.log(line);
})

我们可以将文件 app.js 保存到文件 demo.txt 所在的文件夹，或者我们可以显式设置文件的路径，它将逐行读取文件的内容并将输出打印到控制台。

输出：

Line 1
Line 2
Line 3

Line 5