今天來簡單的介紹一下Tauri裡的file system

要使用window.__TAURI__.fs來獲取我們的檔案的話，由於Tauri有安全機制保護，所以我們要到todo\src-tauri\tauri.conf.json將其設定為true

ex.以下是Tauri所提供的設定

{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": true, // enable all FS APIs
        "readFile": true,
        "writeFile": true,
        "readDir": true,
        "copyFile": true,
        "createDir": true,
        "removeDir": true,
        "removeFile": true,
        "renameFile": true,
        "exists": true
      }
    }
  }
}

而基於安全性的原則，我們要防止路徑被遍歷，也就是禁止絕對路徑或是透過父目錄跑出來獲取所有檔案的資訊，我們可以設定其存取範圍，
ex.$APP變量會再runtime時被注入，並且解析我們app的目錄範圍

{
  "tauri": {
    "allowlist": {
      "fs": {
        "scope": ["$APP/databases/*"]
      }
    }
  }
}

接下來簡單介紹一些常用的函式

Dir

createDir(dir: string, options?: FsDirOptions): Promise<void>

創建一個dir。如果路徑的父組件之一不存在並且recursive選項未設置為 true，則Promise將被拒絕

ex.

import { createDir, BaseDirectory } from '@tauri-apps/api/fs';
// Create the `$APPDIR/users` directory
await createDir('users', { dir: BaseDirectory.App, recursive: true });

readDir(dir: string, options?: FsDirOptions): Promise<FileEntry[]>

列出dir裡面的file

ex.

import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
// Reads the `$APPDIR/users` directory recursively
const entries = await readDir('users', { dir: BaseDirectory.App, recursive: true });

function processEntries(entries) {
  for (const entry of entries) {
    console.log(`Entry: ${entry.path}`);
    if (entry.children) {
      processEntries(entry.children)
    }
  }
}

removeDir(dir: string, options?: FsDirOptions): Promise<void>

刪除目錄。如果目錄不為空且遞歸選項未設置為 true，則 Promise 將被拒絕

ex.

import { removeDir, BaseDirectory } from '@tauri-apps/api/fs';
// Remove the directory `$APPDIR/users`
await removeDir('users', { dir: BaseDirectory.App });

File

copyFile(source: string, destination: string, options?: FsOptions): Promise<void>

將文件複製到目標
ex.

import { copyFile, BaseDirectory } from '@tauri-apps/api/fs';
// Copy the `$APPDIR/app.conf` file to `$APPDIR/app.conf.bk`
await copyFile('app.conf', 'app.conf.bk', { dir: BaseDirectory.App });

readBinaryFile(filePath: string, options?: FsOptions): Promise<Uint8Array>

使用byte array讀取檔案
ex.

import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';
// Read the image file in the `$RESOURCEDIR/avatar.png` path
const contents = await readBinaryFile('avatar.png', { dir: BaseDirectory.Resource });

writeBinaryFile(path: string, contents: BinaryFileContents, options?: FsOptions): Promise<void>

使用byte array寫檔案
ex.

import { writeBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';
// Write a binary file to the `$APPDIR/avatar.png` path
await writeBinaryFile('avatar.png', new Uint8Array([]), { dir: BaseDirectory.App });

readTextFile(filePath: string, options?: FsOptions): Promise<string>

使用UTF-8編碼字符串讀取file
ex.

import { readTextFile, BaseDirectory } from '@tauri-apps/api/fs';
// Read the text file in the `$APPDIR/app.conf` path
const contents = await readTextFile('app.conf', { dir: BaseDirectory.App });

writeTextFile(path: string, contents: string, options?: FsOptions): Promise<void>

使用UTF-8編碼字符串寫入file
ex.

import { writeTextFile, BaseDirectory } from '@tauri-apps/api/fs';
// Write a text file to the `$APPDIR/app.conf` path
await writeTextFile('app.conf', 'file contents', { dir: BaseDirectory.App });

Reference
Tauri Docs

今天簡單的介紹了Tauri的檔案功能，接下來幾天要來完善我們的Todo App，我們明天見