uni 获取本地文件_uni-app 图片(文件) 本地存储解决方案

本文介绍了如何在uni-app中实现文件或图片的本地存储,避免离线状态下页面空白或频繁下载导致的问题。通过封装一个获取文件缓存路径的函数,根据H5平台的特性进行条件编译,实现文件的本地存储和检索。当文件不存在时,进行下载并保存到本地,同时提供了异常处理。使用示例展示了如何调用该函数。
摘要由CSDN通过智能技术生成

我们时长有这样的需求,文件或图片每一次都从远端下载,导致离线状态页面空白,或者耗费带宽和时间太多导致的用户体验差,因此,我们需要一种方案去解决这样的问题

已经下载的文件或图片等资源,直接从从设备本地获取而不是从远端下载

解决思路

1、封装一个获取文件路径的函数,假如文件已经存在本地,则取本地路径,否则下载并返回下载路径

2、函数需要两个参数,一个是文件的下载路径,一个是与文件相关联的id,用来做文件与下载路径之间的关联

3、h5不支持文件存储,所以我们需要做条件编译

4、做一些异常的处理

以下是一个简单的处理函数,可以参考这样的思路去解决此类问题

注意:函数是盲写的,可能会出现bug,这个函数的用意是提供一个解决思路,大家也可以根据自己的需求去做修改

/*

* @description 获取文件的缓存路径,如果文件未缓存,则直接返回路径,并缓存

* @method getFileCache

* @param {String} filePath 完整的图片下载路径,如果没有从缓存中获取到,则用这个路径去下载

* @param {String} fileId 文件id,必须唯一,如guid

* @return {Object} promise对象

*/

export function getFileCache(filePath, fileId) {

const storageKey = '

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值