浏览器端JavaScript调用readdir报错，求读取目录文件的替代方案

为什么你的代码报错？ #

• readdir是Node.js专属的fs模块API，浏览器环境不支持直接访问本地文件系统，这是浏览器的安全限制。
• 你安装的fs包只是npm预留的占位空包，没有任何实际功能，完全无法用于文件读取。

浏览器端可行的实现方法 #

浏览器出于安全考虑，不能主动读取本地目录，必须由用户手动选择目录/文件，以下是两种常用方案：

方案1：原生File API（普通网页通用） #

通过<input>元素让用户选择目录，再遍历选中的文件处理信息，这是兼容性最好的方案。

示例代码

HTML部分：

<input type="file" id="dirPicker" webkitdirectory multiple>

JavaScript部分：

const dirPicker = document.getElementById('dirPicker');

dirPicker.addEventListener('change', (e) => {
  // 将FileList转为数组方便遍历
  const files = Array.from(e.target.files);
  
  files.forEach(file => {
    // 先提取基础文件信息
    console.log(`文件名：${file.name}，大小：${file.size}字节`);
    
    // 如需读取文件内容，使用FileReader
    const reader = new FileReader();
    reader.onload = function(event) {
      // event.target.result 就是文件内容（格式取决于读取方式）
      const content = event.target.result;
      // 在这里编写提取你需要的信息的逻辑
    };
    // 以文本格式读取，如需其他格式可替换为readAsArrayBuffer等方法
    reader.readAsText(file);
  });
});

方案2：File System Access API（现代浏览器专属） #

这个API支持更灵活的文件操作，但需要用户明确授权，仅适配Chrome、Edge等现代浏览器。

示例代码

async function pickAndProcessDir() {
  try {
    // 弹出目录选择框，获取目录句柄
    const dirHandle = await window.showDirectoryPicker();
    
    // 遍历目录下的所有条目
    for await (const entry of dirHandle.values()) {
      if (entry.kind === 'file') {
        const file = await entry.getFile();
        console.log(`选中文件：${file.name}`);
        
        // 读取文件内容的逻辑和方案1一致
        const reader = new FileReader();
        reader.onload = (e) => {
          const content = e.target.result;
          // 处理提取信息
        };
        reader.readAsText(file);
      }
    }
  } catch (err) {
    console.error('操作失败：', err);
  }
}

// 绑定到按钮触发（必须由用户主动操作触发，不能自动执行）
document.getElementById('startBtn').addEventListener('click', pickAndProcessDir);

关键注意事项 #

• 所有浏览器端的文件操作都必须由用户主动触发（比如点击按钮、选择文件），无法自动读取本地文件。
• webkitdirectory属性是目前兼容性较好的目录选择标记，Firefox、Chrome、Edge均已支持。

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