将照片保存到文件系统

我们现在可以拍摄多张照片，并在应用程序的第二个选项卡上以照片库的形式显示它们。但是，这些照片目前没有被永久存储，因此当应用程序关闭时，它们将丢失。

文件系统 API

幸运的是，将它们保存到文件系统只需几个步骤。首先打开 `usePhotoGallery` 函数（`src/composables/usePhotoGallery.ts`）。

文件系统 API 要求写入磁盘的文件以 base64 数据的形式传递，因此此辅助函数将在稍后用于协助此操作。

const convertBlobToBase64 = (blob: Blob) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.readAsDataURL(blob);
  });

接下来，添加一个将照片保存到文件系统的函数。我们将 `photo` 对象（代表新捕获的设备照片）以及 `fileName`（将为文件提供存储路径）作为参数传入。

接下来，我们使用 Capacitor 文件系统 API 将照片保存到文件系统。我们首先将照片转换为 base64 格式，然后将数据馈送到文件系统的 `writeFile` 函数。

const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
  // Fetch the photo, read as a blob, then convert to base64 format
  const response = await fetch(photo.webPath!);
  const blob = await response.blob();
  const base64Data = (await convertBlobToBase64(blob)) as string;

  const savedFile = await Filesystem.writeFile({
    path: fileName,
    data: base64Data,
    directory: Directory.Data,
  });

  // Use webPath to display the new image instead of base64 since it's
  // already loaded into memory
  return {
    filepath: fileName,
    webviewPath: photo.webPath,
  };
};

最后，更新 `takePhoto` 函数以调用 `savePicture`。照片保存后，将其插入到响应式 `photos` 数组的最前面。

const takePhoto = async () => {
  const photo = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100,
  });

  const fileName = Date.now() + '.jpeg';
  const savedFileImage = await savePicture(photo, fileName);

  photos.value = [savedFileImage, ...photos.value];
};

就这样！每次拍摄新照片时，它现在都会自动保存到文件系统。