web应用程序如何访问本地文件？

Question

我正在尝试让 web 应用程序访问本地文件。 一个web IDE之类的vscode可以直接更改或重命名本地文件。 虽然 vscode 似乎没有使用像<input type="file" />这样的标签

我希望通过我的 web 应用程序加载本地目录并控制文件，如删除/重命名。 web IDE的解决方案可以提供一些参考。

vscode如何访问本地文件？

Answer 1

vscode.dev使用文件系统访问 API ，它允许 web 应用程序直接读取和修改文件系统。

它不是使用<input type="file" /> ，而是调用window.showOpenFilePicker()来获取FileSystemFileHandle ，然后可以读取该文件句柄并将其转换为浏览器可以写入和保存文件的FileSystemWritableFileStream 。 同样，API 可以处理目录和浏览文件层次结构。

当然，这是一种简化，因为我不可能 go 通过此答案中 API 的每个细节。 MDN 文章有很多示例和详尽的文档，您将需要通读。 对于测试，应注意 API 仅在通过 HTTPS 提供服务的站点上可用，因此您需要为localhost设置 SSL。 此外，API 并非在所有浏览器中都可用，因此请务必查看兼容性表。