使用JavaScript的FileReader按文件名读取文件时报错如何解决

报错原因 #

• FileReader.readAsText 方法要求传入的参数必须是 Blob 或 File 类型的对象，你直接传入文件名字符串 "class.php" 属于参数类型不匹配，是触发报错的核心原因。
• FileReader 是异步API，读取结果不会直接通过返回值返回，你直接将方法返回值赋值给 result 拿到的只会是 undefined，即使参数正确也无法直接拿到文件内容。
• 浏览器端的JavaScript出于安全沙箱限制，不允许代码直接通过文件名静默读取用户本地磁盘的文件，必须由用户主动触发文件选择交互（比如点击文件选择框选择目标文件），才能拿到符合要求的 File 对象进行后续读取操作。

解决方案 #

浏览器端场景 #

需要先通过用户交互拿到文件对象再读取，实现代码如下：
首先在页面中加入文件选择控件：

<input type="file" id="fileInput">

对应JS逻辑：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', e => {
  const selectedFile = e.target.files[0];
  // 校验选中的文件名是否为目标文件
  if (selectedFile?.name === 'class.php') {
    const reader = new FileReader();
    // 监听读取完成事件获取结果
    reader.onload = event => {
      const result = event.target.result;
      console.log(result);
    };
    // 监听读取错误
    reader.onerror = error => {
      console.error('文件读取失败：', error);
    };
    reader.readAsText(selectedFile);
  }
});

Node.js 服务端场景 #

如果是在Node.js环境下直接按文件名读取本地文件，不需要使用FileReader，直接调用内置fs模块即可：

const fs = require('fs');

// 异步读取方式
fs.readFile('class.php', 'utf8', (err, data) => {
  if (err) {
    console.error('读取失败：', err);
    return;
  }
  console.log(data);
});

// 同步读取方式
try {
  const result = fs.readFileSync('class.php', 'utf8');
  console.log(result);
} catch (err) {
  console.error('读取失败：', err);
}

内容的提问来源于stack exchange，提问作者jordi alba