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 並非在所有瀏覽器中都可用，因此請務必查看兼容性表。