FileSystemFileEntry的file()方法本地调用失败问题排查与解决

云上老周

2026-7-7

问题原因

本地file://协议环境下，浏览器对FileSystem API的安全限制导致FileSystemFileEntry.file()方法生成的URI不符合规范。虽然你启用了File System Access API，但file://属于无权限源，浏览器会严格限制此类环境下的文件系统操作，自动生成的隔离文件系统URI无法被正常解析，从而触发DOMException。

解决方法

方法1：直接从拖拽事件获取File对象（推荐）

拖拽API本身可以直接通过dataTransfer.files拿到File实例，无需借助webkitGetAsEntry的FileSystem API路径，绕开本地环境的限制。修改代码如下：

// 绑定drop事件
document.addEventListener('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  
  const container = document.getElementById('fileList'); // 替换为你的容器元素
  // 遍历拖拽的文件
  for (const file of e.dataTransfer.files) {
    const elem = document.createElement("li");
    elem.textContent = file.name;
    container.appendChild(elem);
    
    // 直接读取文件内容
    const fr = new FileReader();
    fr.onload = function(e) {
      console.log(e.target.result);
    };
    fr.readAsText(file);
  }
});

// 绑定dragover事件阻止默认行为
document.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

方法2：使用本地Web服务器运行页面

如果需要处理文件夹拖拽等必须用到webkitGetAsEntry的场景，最简单的方式是启动一个本地服务器，将页面放在服务器环境下访问，和线上环境保持一致，避开file://的限制：

Python 3：在页面目录执行python -m http.server 8000，然后访问http://localhost:8000/你的页面.html
Node.js：先安装http-server（npm install -g http-server），然后在页面目录执行http-server，访问提示的本地地址