搜索文档 /

从文件系统加载照片

内容

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

幸运的是,这很简单:我们将利用电容器 存储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的移动应用程序!

以前的
在文件系统中保存照片
下一个
添加移动
Baidu