将照片保存到文件系统

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

文件系统 API

幸运的是，将它们保存到文件系统只需要几个步骤。首先，打开 `usePhotoGallery` 钩子（`src/hooks/usePhotoGallery.ts`），并从 `Filesystem` 类获取对 `writeFile` 方法的访问权限

注意

我们将最初使用 `writeFile` 方法，但我们将在稍后使用即将出现的其他方法，因此我们现在就将它们导入。

接下来，在 `usePhotoGallery` 中创建几个新函数

export function usePhotoGallery() {
  const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
    const base64Data = await base64FromPath(photo.webPath!);
    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,
    };
  };
}

export async function base64FromPath(path: string): Promise<string> {
  const response = await fetch(path);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = () => {
      if (typeof reader.result === 'string') {
        resolve(reader.result);
      } else {
        reject('method did not return a string');
      }
    };
    reader.readAsDataURL(blob);
  });
}

注意

`base64FromPath` 方法是一个辅助实用程序，它从提供的路径下载文件并返回该文件的 base64 表示形式。

我们传入 `photo` 对象，它表示新捕获的设备照片，以及 `fileName`，它将为要存储的文件提供路径。

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

最后，在 `takePhoto` 方法中，调用 `savePicture` 并直接传入照片对象和文件名，位于 `setPhotos` 的调用下方。以下是完整的方法

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);
  const newPhotos = [savedFileImage, ...photos];
  setPhotos(newPhotos);
};

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