跳至主要内容
版本：v8

从文件系统加载照片

我们已经实现了拍照和保存到文件系统。还缺少最后一个功能：照片存储在文件系统中，但我们需要一种方法来保存指向每个文件的指针，以便它们可以在照片库中再次显示。

幸运的是，这很简单：我们将利用 Capacitor 的 首选项 API 将我们的照片数组存储在键值存储中。

首选项 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" />）设置为文件系统上的每个照片文件，从而自动显示它们。然而，在 Web 上，我们必须从文件系统中读取每个图像到 base64 格式，因为文件系统 API 将它们存储在 IndexedDB 中，以 base64 格式存储。

最后，我们需要一种方法来在加载照片库页面时调用 loadSaved 函数。为此，请使用 Vue 的 mounted 生命周期钩子。之前我们已经从 Vue 中导入了 onMounted

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

在 usePhotoGallery 函数中，添加 onMounted 函数并调用 loadSaved

onMounted(loadSaved);

就这样！我们在 Ionic 应用程序中构建了一个完整的照片库功能，该功能在 Web 上运行。接下来，我们将将其转换为 iOS 和 Android 的移动应用程序！

内容

编辑此页面