从文件系统加载照片
我们已经实现了照片拍摄和保存到文件系统。还有最后一个功能缺失:照片存储在文件系统中，但我们需要一种方法来保存指向每个文件的指针，以便它们可以再次显示在图片库中。
幸运的是，这很简单:我们将利用电容器 存储API 将我们的照片数组存储在键值存储中。
存储API
首先定义一个常量变量，它将作为顶部的存储键
usePhotoGallery
函数
src /可组合/ usePhotoGallery.ts
：
常量
PHOTO_STORAGE
＝
“照片”
；
接下来,添加一个
cachePhotos
函数，将照片数组作为JSON保存到文件存储:
常量
cachePhotos
＝
（
）
＝＞
｛
存储
．
集
（
｛
关键
：
PHOTO_STORAGE
，
价值
：
JSON
．
stringify
（
照片
．
价值
）
｝
）
；
｝
接下来，使用Vue
看功能
看
照片
数组中。当数组被修改时(在本例中是拍摄或删除照片)，触发
cachePhotos
函数。我们不仅可以重用代码，而且应用程序用户何时关闭或切换到另一个应用程序也无关紧要——照片数据总是会被保存。
看
（
照片
，
cachePhotos
）
；现在已经保存了照片数组数据，创建一个函数来在Tab2加载时检索数据。首先，从Storage中检索照片数据，然后将每张照片的数据转换为base64格式:
常量
loadSaved
＝
异步
（
）
＝＞
｛
常量
photoList
＝
等待
存储
．
得到
（
｛
关键
：
PHOTO_STORAGE
｝
）
；
常量
photosInStorage
＝
photoList
．
价值
？
JSON
．
解析
（
photoList
．
价值
）
：
［
］
；
为
（
常量
照片
的
photosInStorage
）
｛
常量
文件
＝
等待
文件系统
．
readFile
（
｛
路径
：
照片
．
filepath
，
目录
：
目录
．
数据
｝
）
；
照片
．
webviewPath
＝
｀
数据:图像/ jpeg; base64,
$ {
文件
．
数据
｝
｀
；
｝
照片
．
价值
＝
photosInStorage
；
｝
在移动端(下一个!)，我们可以直接设置图像的来源标签-
< img src = " x " / >
-到文件系统上的每个照片文件，自动显示它们。然而，在web上，我们必须从Filesystem中将每个映像读取为base64格式，因为Filesystem API将它们存储在base64中
IndexedDB
在引擎盖下。
最后，我们需要一种方法
loadSaved
函数时，照片库页面被加载。为此，请使用Vue
安装周期钩
．首先,进口
onMounted
从Vue:
进口
｛
裁判
，
onMounted
，
看
｝
从
“vue”
；
然后,在
usePhotoGallery
函数,添加
onMounted
函数和调用
loadSaved
：
onMounted
（
loadSaved
）
；就是这样!我们已经在我们的Ionic应用程序中建立了一个完整的图片库功能，可以在网络上工作。betway东盟体育app接下来，我们将把它转化为iOS和Android的移动应用程序!