在瀏覽器中進行文件操作

在開發WebApp 時可能會遇到文件相關的操作，例如上傳文件到伺服器、下載文件到本地、快取文件等，下面會介紹幾種不同的方式進行文件操作。

基於標籤的上傳和下載

最常用的檔案上傳方式應該是使用 input 標籤，透過設定 input 標籤的 type=”file” 可以允許使用者從本機選擇檔案進行上傳。

function InputFile() {
    const [file, setFile] = useState<file null>(null);
    const handleChange = (e: React.ChangeEvent<htmlinputelement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setFile(file);
  };
    return <input onchange="{handleChange}" type="file">
}
</htmlinputelement></file>

檔案存取 API

檔案系統存取 API（File System Access API）屬於檔案系統 API 的一部分，可以透過使用 API 在使用者的操作下完成檔案的讀寫。

使用此 API 進行檔案操作時會使用以下介面

• showOpenFilePicker：用於顯示一個文件選擇器並允許使用者選擇一個或多個文件，然後傳回這些文件的句柄；

export function PickerFS() {
    const [file, setFile] = useState<file null>(null);
    const handleChooseFile = async () => {
    const fileHandles = await window.showOpenFilePicker();
    const file = await fileHandles[0].getFile();
    setFile(file);
  };
  return <button onclick="{handleChooseFile}">Click</button>
}
</file>

• showSaveFilePicker：用於顯示一個檔案選擇器並允許使用者保存一個檔案（覆蓋或新建）；

export function PickerFS() {
    const handleChooseFile = async () => {
    const directoryHandle = await window.showDirectoryPicker();
    const keys = directoryHandle.keys();
    // 打印该目录下所有文件的名字
    for await (const key of keys) {
      console.log(key);
    }
  };
  return <button onclick="{handleChooseFile}">Click</button>
}

• showDirectoryPicker：用於顯示一個目錄選擇器並允許使用者選擇一個目錄；

export function PickerFS() {
    const [file, setFile] = useState<file null>(null);
    const handleDownloadFile= async () => {
    const opts = {
      suggestedName: "test.txt",
      types: [
        {
          description: "Text file",
          accept: { "text/plain": [".txt"] },
        },
      ],
    };

    const fileHandle = await window.showSaveFilePicker(opts);
    const writable = await fileHandle.createWritable();
    await writable.write("Hello, world!");
    await writable.close();
  };
  return <button onclick="{handleDownloadFile}">Click</button>
}
</file>

來源私有檔案系統

來源私有檔案系統跟上面的檔案存取系統類似，都是檔案系統 API 的一部分，但是它們有個最直接的差異就是是否對使用者可見。 showXXX 介面都需要開啟檔案（目錄）選擇器，並且需要使用者主動選擇檔案（目錄），儲存的檔案也是需要儲存到使用者指定的路徑，但是來源私有檔案系統的互動不會對使用者可見，並且儲存的文件是經過處理的數據，使用者無法看到原始數據。

export function OpFs() {
  const handleChooseFile = async (event: React.ChangeEvent<htmlinputelement>) => {
    const fileList = event.target.files;
    const file = fileList && fileList[0];
    if (!file) return;

    const opfsRoot = await navigator.storage.getDi rectory();
    const fileHandle = await opfsRoot.getFileHandle(file.name, { create: true });
    const writable = await fileHandle.createWritable();
    await writable.write(file);
    await writable.close();
  };

  return <inputfile onchange="{handleChooseFile}"></inputfile>;
}
</htmlinputelement>

await navigator.storage.getDirectory() 傳回一個表示使用者本機檔案系統根目錄的檔案句柄，然後透過getFileHandle 取得指定檔案的句柄，create 為true 表示如果沒有該檔案的話就會建立一個，接著使用createWritable建立可寫流，開發者可以透過這個可寫入流向指定檔案寫入數據，最後關閉可寫流。

注意事項

? 檔案存取系統和來源檔案系統在使用上很相似，對特定檔案或目錄的存取都需要透過檔案句柄（FileSystemFileHandle）或資料夾句柄（FileSystemDirectoryHandle）。

句柄可以理解為是對檔案本身的包裝，透過句柄的介面對檔案進行讀取（getFile）寫入（createWritable）操作。

參見

• https://web.dev/articles/origin-private-file-system?hl=zh-cn#specifics_of_the_origin_private_file_system
• https://developer.chrome.com/docs/capabilities/web-apis/file-system-access?hl=zh-cn
• https://gine.me/posts/70f8e931bc17426fb54127948bcf4a0e
• https://hughfenghen.github.io/posts/2024/03/14/web-storage-and-opfs/

以上是在瀏覽器中進行文件操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！