」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 在瀏覽器中進行文件操作

在瀏覽器中進行文件操作

發佈於2024-11-02
瀏覽:303

在浏览器中进行文件操作

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

基於標籤的上傳和下載

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

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

檔案存取 API

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

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

  • showOpenFilePicker:用於顯示一個文件選擇器並允許使用者選擇一個或多個文件,然後傳回這些文件的句柄;
export function PickerFS() {
    const [file, setFile] = useState(null);
    const handleChooseFile = async () => {
    const fileHandles = await window.showOpenFilePicker();
    const file = await fileHandles[0].getFile();
    setFile(file);
  };
  return 
}
  • 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 
}
  • showDirectoryPicker:用於顯示一個目錄選擇器並允許使用者選擇一個目錄;
export function PickerFS() {
    const [file, setFile] = useState(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 
}

來源私有檔案系統

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

export function OpFs() {
  const handleChooseFile = async (event: React.ChangeEvent) => {
    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 ;
}

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/
版本聲明 本文轉載於:https://dev.to/yukiniro/zai-liu-lan-qi-zhong-jin-xing-wen-jian-cao-zuo-3nk1?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3