file system access api通過window.showopenfilepicker()、window.showsavefilepicker()和window.showdirectorypicker()實現瀏覽器中對本地文件系統的操作。1.調用showopenfilepicker()選擇文件并獲取句柄，再通過getfile()讀取內容；2.showsavefilepicker()配合createwritable()實現文件保存功能；3.showdirectorypicker()用于訪問目錄及其內容。所有操作必須基于用戶授權，并且權限通常為臨時性，可在安全上下文中使用該api。兼容性方面需檢查api是否存在及是否運行在https環境下，同時完善錯誤處理機制以應對aborterror、notallowederror等異常。相較于傳統文件操作方式，file system Access api支持寫入、目錄訪問及持久化權限等功能，顯著提升了web應用的文件管理能力與用戶體驗。
bom中操作瀏覽器的文件系統API，核心在于利用現代Web平臺提供的File System Access API。這個API讓Web應用能夠以更接近原生應用的方式，直接與用戶的本地文件系統進行交互，比如打開、保存文件，甚至訪問目錄內容。但所有這些操作都嚴格建立在用戶明確的授權之上，保障了隱私和安全。
解決方案
要操作瀏覽器的文件系統，我們主要會用到幾個全局方法：window.showOpenFilePicker()、window.showSaveFilePicker() 和 window.showDirectoryPicker()。它們返回的都是 FileSystemHandle 對象，具體是 FileSystemFileHandle 或 FileSystemDirectoryHandle。
首先，讓我們看看如何打開一個文件：
async function openLocalFile() { try { // 彈出文件選擇器，用戶可以選擇一個或多個文件 // 這里我們只取第一個文件句柄 const [fileHandle] = await window.showOpenFilePicker({ // 允許選擇的文件類型，可選 types: [{ description: '文本文件', accept: {'text/plain': ['.txt', '.md']}, }, { description: '圖片文件', accept: {'image/*': ['.png', '.gif', '.jpeg', '.jpg']}, }], multiple: false // 只允許選擇一個文件 }); // 通過文件句柄獲取文件對象 const file = await fileHandle.getFile(); const content = await file.text(); // 或者 file.arrayBuffer() / file.stream() console.log('文件名稱:', file.name); console.log('文件內容:', content.substring(0, 200) + '...'); // 打印部分內容 // 你還可以保存這個 fileHandle，以便后續對同一個文件進行寫操作， // 只要用戶沒有撤銷權限，或者瀏覽器會提示重新授權。 return fileHandle; } catch (error) { // 用戶取消選擇，或者其他錯誤 if (error.name === 'AbortError') { console.warn('用戶取消了文件選擇。'); } else { console.error('打開文件時發生錯誤:', error); } return null; } } // 調用示例： // openLocalFile().then(handle => { // if (handle) { // console.log('文件句柄已獲取:', handle); // } // });
接著，是保存文件。這比讀取文件稍微復雜一點，因為涉及到創建可寫流：
async function saveContentToFile(content, suggestedName = 'untitled.txt') { try { // 彈出保存文件對話框 const fileHandle = await window.showSaveFilePicker({ suggestedName: suggestedName, // 建議的文件名 types: [{ description: '文本文件', accept: {'text/plain': ['.txt']}, }], }); // 創建一個可寫流 const writableStream = await fileHandle.createWritable(); // 寫入內容 await writableStream.write(content); // 關閉流，完成寫入 await writableStream.close(); console.log(`文件 "${fileHandle.name}" 保存成功！`); return fileHandle; } catch (error) { if (error.name === 'AbortError') { console.warn('用戶取消了文件保存。'); } else { console.error('保存文件時發生錯誤:', error); } return null; } } // 調用示例： // saveContentToFile('Hello, File System API!', 'my-awesome-doc.txt');
最后，訪問目錄內容。這在構建一個簡單的Web版文件管理器時非常有用：
async function accessDirectory() { try { const dirHandle = await window.showDirectoryPicker(); console.log('已選擇目錄:', dirHandle.name); // 遍歷目錄內容 for await (const entry of dirHandle.values()) { if (entry.kind === 'file') { console.log(` 文件: ${entry.name}`); // 如果需要讀取文件內容，可以進一步調用 entry.getFile() // const file = await entry.getFile(); // const content = await file.text(); } else if (entry.kind === 'directory') { console.log(` 目錄: ${entry.name}`); // 可以遞歸地進入子目錄 // const subDirHandle = await dirHandle.getDirectoryHandle(entry.name); // await accessDirectoryContent(subDirHandle); } } return dirHandle; } catch (error) { if (error.name === 'AbortError') { console.warn('用戶取消了目錄選擇。'); } else { console.error('訪問目錄時發生錯誤:', error); } return null; } } // 調用示例： // accessDirectory();
這些就是 File System Access API 的基本操作。你會發現它確實讓Web應用在文件操作方面有了質的飛躍。
瀏覽器文件系統API的安全性與權限管理
談到瀏覽器文件系統API，安全性絕對是繞不開的話題，而且它設計得相當嚴謹。畢竟，讓一個網頁直接讀寫你本地的文件，這聽起來就有點讓人緊張，對吧？
首先，最核心的一點是：所有文件和目錄的訪問都必須由用戶主動發起。 這意味著，你的Web應用不能在用戶不知情的情況下，偷偷摸摸地去訪問本地文件。比如，showOpenFilePicker()、showSaveFilePicker() 和 showDirectoryPicker() 這些方法，都必須在響應用戶手勢（比如點擊按鈕）時才能被調用。如果你嘗試在頁面加載時就調用它們，或者在一個非用戶觸發的事件中調用，瀏覽器通常會直接拒絕，或者拋出錯誤。這是為了防止惡意網站通過腳本自動下載或上傳文件。
其次，權限是臨時的，且粒度很細。 當你通過 showOpenFilePicker() 選擇一個文件后，你的Web應用獲得了對這個文件句柄的“讀取”權限。如果你想寫入，還需要用戶通過 showSaveFilePicker() 授權。對于目錄也是一樣，showDirectoryPicker() 授予的是對所選目錄及其子內容的讀取權限。這種權限通常是“一次性”的，也就是當前會話有效。用戶關閉了頁面，下次再打開，就需要重新授權。
當然，File System Access API 也提供了持久化權限的能力。通過 fileHandle.requestPermission({ mode: ‘readwrite’ }) 或 directoryHandle.requestPermission({ mode: ‘readwrite’ })，你可以請求用戶授予更持久的讀寫權限。如果用戶同意，瀏覽器可能會記住這個授權，下次訪問同一個文件或目錄時就無需再次彈窗。但請注意，用戶隨時可以在瀏覽器設置中撤銷這些權限，Web應用也應該能優雅地處理權限被撤銷的情況。
此外，這個API只能在安全上下文（即 https 協議）下使用。這是現代Web API的普遍要求，旨在防止中間人攻擊，確保通信的完整性和保密性。在 http:// 協議下，這些API是不可用的，你會發現 window.showOpenFilePicker 根本不存在或者直接報錯。
對我個人而言，這種嚴格的權限模型是必要的，它在賦予Web應用強大能力的同時，也最大程度地保護了用戶的隱私和系統安全。開發者需要做的，就是清晰地向用戶解釋為什么需要這些權限，并確保權限請求的時機和方式都符合預期。
如何處理瀏覽器文件系統API的兼容性與錯誤
雖然File System Access API功能強大，但它畢竟是較新的API，所以處理兼容性和各種可能出現的錯誤就顯得尤為重要。這就像你拿到一把新工具，得先知道它在哪能用，以及萬一用壞了怎么辦。
兼容性檢查是第一步。不是所有瀏覽器都支持這個API，也不是所有版本的瀏覽器都支持。目前，Chromium 系的瀏覽器（chrome, edge, Opera）支持得比較好，firefox 和 safari 還在積極開發中或部分支持。在你的代碼中，應該始終檢查API是否存在：
if ('showOpenFilePicker' in window && window.isSecureContext) { // 瀏覽器支持 File System Access API 且處于安全上下文 // 可以在這里使用 API } else { // 瀏覽器不支持或不在安全上下文 console.warn('當前瀏覽器或環境不支持 File System Access API。請使用 Chrome/Edge 并確保在 HTTPS 環境下。'); // 提供備用方案，比如傳統的 <input type="file"> document.getElementById('fallbackFileInput').style.display = 'block'; }
window.isSecureContext 檢查當前頁面是否運行在安全上下文（HTTPS 或 localhost）中，這是使用許多現代Web API的前提。
錯誤處理是使用任何異步API的基石，File System Access API 也不例外。由于這些操作涉及到用戶交互、文件系統訪問等，可能會出現多種錯誤。最常見的錯誤是用戶取消了操作，這會拋出 AbortError。其他錯誤可能包括權限不足、文件不存在、磁盤空間不足等。
一個健壯的錯誤處理通常會使用 try…catch 結構：
async function someFileSystemOperation() { try { // ... 文件系統操作代碼 ... } catch (error) { if (error.name === 'AbortError') { console.info('操作被用戶取消。'); // 可以給用戶一個提示，或者什么都不做 } else if (error.name === 'NotAllowedError') { console.error('權限不足，無法執行此操作。用戶可能拒絕了權限或撤銷了權限。'); // 提示用戶檢查瀏覽器權限設置 } else if (error.name === 'NotFoundError') { console.error('指定的文件或目錄未找到。'); } else { console.error('文件系統操作發生未知錯誤:', error); } // 根據錯誤類型，可能需要提供備用方案或用戶反饋 } }
我個人覺得，對于 AbortError，通常只需要在控制臺記錄一下，不打擾用戶即可。但對于 NotAllowedError 這種明確的權限問題，就應該給用戶一個友好的提示，告訴他們可能需要授權。
另外，要注意的是，即使獲取了 fileHandle，后續對它的操作（比如 getFile() 或 createWritable()）也可能失敗，例如文件被刪除、移動，或者權限被撤銷。所以，每次使用 fileHandle 時，都應該考慮其操作的原子性和可能產生的錯誤。
瀏覽器文件系統API與傳統文件操作的異同
在File System Access API出現之前，Web應用處理文件主要依賴于 元素和 FileReader API。現在有了新的API，我們來對比一下它們，看看新工具到底強在哪，又有什么不一樣的地方。
相同點：
- 都依賴用戶發起： 無論是傳統的 還是新的 File System Access API，都必須由用戶通過點擊、拖拽等手勢來觸發文件選擇或保存操作。這是瀏覽器安全模型的基礎。
- 都處理 Blob 或 File 對象： 最終，你從文件系統中讀取到的內容，都會被封裝成 File 對象（它繼承自 Blob），然后你可以用 FileReader 或 Response.blob() 等方式來處理這些二進制數據。
不同點（也是 File System Access API 的優勢所在）：
-
寫入能力： 這是最大的區別。傳統的 只能讀取用戶選擇的文件，無法直接將數據保存到用戶的本地文件系統。如果你想讓用戶保存文件，你通常需要創建一個 Blob，然后生成一個下載鏈接 ，讓用戶點擊下載。這體驗很糟糕，而且無法覆蓋現有文件。 而 File System Access API 則提供了 showSaveFilePicker() 和 createWritable()，允許你直接將數據寫入到用戶選擇的文件路徑，甚至可以覆蓋現有文件。這讓Web應用能夠實現真正的“保存”功能，就像桌面應用一樣。
-
目錄訪問： 傳統的 雖然可以讀取目錄，但它返回的是一個文件列表，你無法直接操作這個目錄本身，比如創建新文件、刪除文件或子目錄。 File System Access API 的 showDirectoryPicker() 則直接返回一個 FileSystemDirectoryHandle，你可以用它來遍歷目錄內容，獲取子文件或子目錄的句柄，甚至在用戶授權下，直接在目錄中創建新文件或新子目錄（通過 getFileHandle(name, { create: true }) 或 getDirectoryHandle(name, { create: true })）。這對于開發Web版ide、圖片管理器等應用至關重要。
-
持久化權限： 傳統的 每次操作都需要用戶重新選擇文件。 File System Access API 允許請求持久化權限。如果用戶同意，Web應用可以在后續會話中，無需再次彈窗，直接訪問之前授權的文件或目錄。這顯著提升了用戶體驗，尤其是在需要頻繁操作同一組文件的場景下。
-
流式寫入： createWritable() 返回的是一個 WritableStream，這意味著你可以分塊寫入大文件，而不需要一次性將所有內容加載到內存中。這對于處理大文件非常高效。
總的來說，File System Access API 讓Web應用在文件管理方面從“只讀”邁向了“讀寫”，從“一次性”走向了“更持久”，極大地拓展了Web應用的能力邊界。它讓Web應用在文件操作的體驗上，更接近原生桌面應用，也為PWA（Progressive Web Apps）提供了更強大的離線和本地集成能力。當然，伴隨能力提升的，是更嚴格的安全模型和更復雜的API設計，開發者在使用時需要充分理解其機制。
