在 JavaScript 中读取文件

在前端开发中，读取本地文件是一个常见的需求。在 JavaScript 中，有多种方法可以读取文件，下面将逐一介绍。

XMLHttpRequest

XMLHttpRequest 是一个在前端常用的用于创建 AJAX 请求的对象，它也可以用于读取本地文件。示例代码如下：

let xhr = new XMLHttpRequest();
xhr.open("GET", "file.txt", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.send();

这段代码读取名为 file.txt 的文本文件，并将其中的内容打印在控制台上。需要注意的是，使用 XMLHttpRequest 读取文件只能在同一域名下使用，否则会报跨域错误。

Fetch API

Fetch API 是一个比 XMLHttpRequest 更传统的用于请求网络资源的接口，它也可以用于读取本地文件。示例代码如下：

fetch("file.txt")
  .then(response => response.text())
  .then(text => {
    console.log(text);
  });

这段代码读取名为 file.txt 的文本文件，并将其中的内容打印在控制台上。需要注意的是，同样不能跨域使用。

FileReader API

FileReader API 是一个用于在浏览器中读取文件的接口，它可以通过 File 对象读取本地文件。示例代码如下：

let fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.onchange = function(event) {
  let file = event.target.files[0];
  let reader = new FileReader();
  reader.onload = function(event) {
    console.log(event.target.result);
  };
  reader.readAsText(file);
};
document.body.appendChild(fileInput);

这段代码创建了一个文件选择器，当用户选择文件后，就可以通过 FileReader API 读取文件。需要注意的是，FileReader API 可以读取任意路径的文件，但要求用户手动选择。

Node.js 中的 fs 模块

在 Node.js 环境下，可以通过 fs 模块读取本地文件。示例代码如下：

const fs = require("fs");
fs.readFile("file.txt", "utf8", function(err, data) {
  if (err) throw err;
  console.log(data);
});

这段代码读取名为 file.txt 的文本文件，并将其中的内容打印在控制台上。需要注意的是，只能在服务器端使用，不能在浏览器中直接引用。