我正在尝试让Web应用程序访问本地文件。像vscode这样的Web IDE可以直接更改或重命名本地文件。而vscode似乎没有使用像<input type="file" />这样的标记我希望通过自己的Web应用程序加载一个本地目录，并控制文件的删除/重命名等操作，Web IDE的解决方案可能会提供一些参考。vscode如何访问本地文件？
<input type="file" />
u2nhd7ah1#
vscode.dev使用File System Access API，它允许Web应用程序直接读取和修改文件系统。它不使用<input type="file" />，而是调用window.showOpenFilePicker()来获取FileSystemFileHandle，然后可以读取FileSystemFileHandle并将其转换为FileSystemWritableFileStream，浏览器可以向FileSystemWritableFileStream写入和保存文件，类似地，API可以处理目录和浏览文件层次结构。当然，这是一个简化，因为我不可能在这个答案中详细介绍API的每一个细节。MDN article有很多示例和完整的文档，你会想通读。为了测试，应该注意的是，API只在通过HTTPS服务的网站上可用，所以你需要为你的localhost设置SSL。另外，该API并非在所有浏览器中都可用，因此请务必检查compatibility table。
window.showOpenFilePicker()
FileSystemFileHandle
FileSystemWritableFileStream
localhost
1条答案
按热度按时间u2nhd7ah1#
vscode.dev使用File System Access API，它允许Web应用程序直接读取和修改文件系统。
它不使用
<input type="file" />，而是调用window.showOpenFilePicker()来获取FileSystemFileHandle，然后可以读取FileSystemFileHandle并将其转换为FileSystemWritableFileStream，浏览器可以向FileSystemWritableFileStream写入和保存文件，类似地，API可以处理目录和浏览文件层次结构。当然，这是一个简化，因为我不可能在这个答案中详细介绍API的每一个细节。MDN article有很多示例和完整的文档，你会想通读。为了测试，应该注意的是，API只在通过HTTPS服务的网站上可用，所以你需要为你的
localhost设置SSL。另外，该API并非在所有浏览器中都可用，因此请务必检查compatibility table。