版本：v8

從檔案系統載入照片

我們已實作拍照並儲存到檔案系統的功能。還缺少最後一項功能：照片儲存在檔案系統中，但我們需要一種方法來儲存每個檔案的指標，以便它們可以再次顯示在照片庫中。

幸運的是，這很容易：我們將利用 Capacitor 的 Preferences API，將我們的照片陣列儲存在鍵值儲存區中。

Preferences API

首先，在 src/composables/usePhotoGallery.ts 中 usePhotoGallery 函式的頂部定義一個常數變數，它將作為儲存區的鍵。

const PHOTO_STORAGE = 'photos';

接下來，新增一個 cachePhotos 函式，將 Photos 陣列以 JSON 格式儲存至偏好設定。

const cachePhotos = () => {
  Preferences.set({
    key: PHOTO_STORAGE,
    value: JSON.stringify(photos.value),
  });
};

接下來，使用 Vue 的 watch 函式來監看 photos 陣列。每當修改陣列時（在此案例中為拍照或刪除照片），都會觸發 cachePhotos 函式。我們不僅可以重複使用程式碼，而且當應用程式使用者關閉或切換到不同的應用程式時也無關緊要 - 照片資料始終會儲存。

watch(photos, cachePhotos);

現在照片陣列資料已儲存，建立一個函式以在載入 Tab2 時擷取資料。首先，從偏好設定擷取照片資料，然後將每張照片的資料轉換為 base64 格式。

const loadSaved = async () => {
  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];

  for (const photo of photosInPreferences) {
    const file = await Filesystem.readFile({
      path: photo.filepath,
      directory: Directory.Data,
    });
    photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
  }

  photos.value = photosInPreferences;
};

在行動裝置上（接下來會介紹！），我們可以將影像標籤的來源直接設定為檔案系統中的每個照片檔案 - <img src="x" /> - 來自動顯示它們。但是，在網頁上，我們必須從檔案系統中將每個影像讀取為 base64 格式，因為檔案系統 API 會將它們以 base64 格式儲存在 IndexedDB 中。

最後，我們需要一種方法來在載入照片庫頁面時呼叫 loadSaved 函式。為此，請使用 Vue 的 mounted 生命週期鉤子。稍早我們已從 Vue 匯入 onMounted。

import { ref, onMounted, watch } from 'vue';

在 usePhotoGallery 函式中，新增 onMounted 函式並呼叫 loadSaved。

onMounted(loadSaved);

就是這樣！我們已在 Ionic 應用程式中建立完整可在網頁上運作的照片庫功能。接下來，我們會將其轉換為適用於 iOS 和 Android 的行動應用程式！

從檔案系統載入照片

Preferences API​

目錄

Preferences API