Uniapp 缓存图片

2023年11月23日 23 条评论

一个好的 app 应该有缓存机制，尤其是网络图片，例如头像之类的。如果没有的话每次页面都要从网络加载，鉴于目前服务器的小水管带宽有限。于是还是加了个缓存功能（闺蜜圈安卓新版本已经加入缓存功能）。

当然，代码还是抄来的，不过稍微改了一下：

const img = {
    cachingImage: function(filePath) {
        // #ifdef APP-PLUS
        const cacheIamge = uni.getStorageSync(filePath) //查看缓存是否有图片资源，没有则下载
        if (cacheIamge) {
            console.log("已缓存为：" + cacheIamge)
            
            return cacheIamge
            // return;
        } else { //未缓存,进行下载保存
            uni.downloadFile({
                url: filePath,
                success: (res) => {
                    if (res.statusCode === 200) { //下载成功
                        // 再进行本地保存
                        uni.saveFile({
                            tempFilePath: res.tempFilePath,
                            success: function(result) {
                                uni.setStorageSync(filePath, result.savedFilePath)
                            },
                            fail: function(erro) {
                                // console.log('保存失败')
                            }
                        })
                    } else {
                        // console.log('下载临时文件失败')
                    }
                },
                fail: (res) => {
                    // console.log('下载临时文件失败fail')
                }
            })
            return filePath
        }
        // #endif
        // #ifndef APP-PLUS
        return filePath
        // #endif
    },

    showImage: function(imageUrl) {
        const url = uni.getStorageSync(imageUrl)
        return url
    },
}
export default img;

使用的时候直接用cachingImage方法即可，如果没有缓存返回的是 url 路径，如果已经缓存返回的是本地文件路径。

参考链接：https://blog.csdn.net/matchaa__/article/details/132860057

☆版权☆

* 网站名称：obaby@mars
* 网址：https://nai.dog/
* 个性：https://oba.by/
* 本文标题：《Uniapp 缓存图片》
* 本文链接：https://www.nai.dog/2023/11/14566
* 短链接：https://oba.by/?p=14566
* 转载文章请标明文章来源，原文标题以及原文链接。请遵从《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。

UniApp 缓存

Previous Post Next Post

obaby

爱好广泛的火星小妖精，有问题欢迎留言交流啊~(✪ω✪) 爬虫类工具请先点击这个链接查看用法https://oba.by/?p=12240 闺蜜圈APP下载 https://guimiquan.cn

23 comments

格子老师说道：

2023年11月23日 11:23

Google Chrome 86 Windows 10 中国–天津–天津联通
厉害

回复
1. obaby说道：
  
  2023年11月23日 13:15
  
  Google Chrome 118 Mac OS X 10.15 中国–山东–青岛联通
  你的 cdn 还没套好啊？
  
  回复
  1. 格子老师说道：
    
    2023年11月23日 13:32
    
    Google Chrome 86 Windows 10 中国–天津–天津联通
    没有呢
    
    回复
湘铭呀！说道：

2023年11月23日 12:30

Microsoft Edge 119 Windows 10 中国–福建–宁德电信
赞

回复
1. obaby说道：
  
  2023年11月23日 13:16
  
  Google Chrome 118 Mac OS X 10.15 中国–山东–青岛联通
  
  回复
dujun说道：

2023年11月23日 13:07

Google Chrome 119 Mac OS X 10.15 中国–浙江–杭州华数宽带
我以为图片缓存是系统自动实现的呢

回复
1. obaby说道：
  
  2023年11月23日 13:15
  
  Google Chrome 118 Mac OS X 10.15 中国–山东–青岛联通
  并没有，搜了下发现也有一些插件，但是需要替换 image 标签，就抄了个代码，改了改。
  
  回复
  1. dujun说道：
    
    2023年11月23日 13:17
    
    Google Chrome 119 Mac OS X 10.15 中国–浙江–杭州华数宽带
    我以为调用了 webview 类似的，然后自动调用浏览器缓存
    
    回复
    1. obaby说道：
      
      2023年11月23日 13:20
      
      Google Chrome 118 Mac OS X 10.15 中国–山东–青岛联通
      h5是可以的，基于服务器的缓存策略，但是 app 并不会缓存，需要自己去缓存文件。不然就会每次都从服务器加载。
      
      回复
    2. obaby说道：
      
      2023年11月23日 13:21
      
      Google Chrome 118 Mac OS X 10.15 中国–山东–青岛联通
      所以这个缓存使用宏定义包裹了一下，仅对 app 生效
      
      回复
  2. 小乔说道：
    
    2023年11月24日 08:45
    
    Google Chrome 118 Android 14.0 中国–辽宁–沈阳移动
    出现了！面相csdn编程
    
    回复
    1. obaby说道：
      
      2023年11月24日 08:46
      
      Google Chrome 118 Mac OS X 10.15 中国–山东–青岛移动
      说实话，真不爱看 csdn 的文章，不是针对作者，这个破网站现在是真烂。
      
      回复
      1. 小乔说道：
        
        2023年11月24日 08:47
        
        Google Chrome 118 Android 14.0 中国–辽宁–沈阳移动
        确实是这样
        
        回复
棋说道：

2023年11月23日 18:28

Google Chrome 119 Windows 10 中国–河北–唐山电信
这个是小程序嘛

回复
1. obaby说道：
  
  2023年11月23日 22:01
  
  Google Chrome 119 Windows 10 中国–山东–临沂联通
  跨平台，支持小程序~~不过这个优化是针对app的。
  
  回复
Dabenshi说道：

2023年11月23日 19:58

Google Chrome 119 Windows 10 中国–北京–北京联通
要不要科普下封装，想学

回复
1. obaby说道：
  
  2023年11月23日 22:02
  
  Google Chrome 119 Windows 10 中国–山东–临沂联通
  主要是我代码也是现抄的，哈哈哈。封装不了啊~~
  
  回复
子痕说道：

2023年11月23日 21:48

Microsoft Edge 119 Windows 10 中国–江苏–南京电信
细节满满。

回复
1. obaby说道：
  
  2023年11月23日 22:01
  
  Google Chrome 119 Windows 10 中国–山东–临沂联通
  追求极致体验，哈哈哈
  
  回复
小彦说道：

2023年11月24日 08:16

WebView 4 Android 12 中国–广东–珠海电信
确实app内图片要缓存，真为我们用户的流量操心哈

回复
1. obaby说道：
  
  2023年11月24日 08:37
  
  Google Chrome 118 Mac OS X 10.15 中国–山东–青岛移动
  其实流量还好，就是个头像也没多大，但是每次都下载，主要是加载速度有点慢。
  
  回复
夏日博客说道：

2023年11月24日 08:58

Google Chrome 119 Windows 10 中国中国电信
项目还是要有缓存功能的，不然每次打开速度都会很慢。

回复
1. obaby说道：
  
  2023年11月24日 11:05
  
  Google Chrome 118 Mac OS X 10.15 中国–山东–青岛联通
  是哒，缓存功能有和没有差别还是比较大的。
  
  回复