Uniapp 缓存图片

一个好的 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://lang.ma/
* 个性:https://oba.by/
* 本文标题: 《Uniapp 缓存图片》
* 本文链接:https://loli.gifts/2023/11/14566
* 短链接:https://oba.by/?p=14566
* 转载文章请标明文章来源,原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。


You may also like

23 comments

  1.   Level 7
    Google Chrome 119 Google Chrome 119 Mac OS X 10.15 Mac OS X 10.15 cn中国–浙江–杭州 华数宽带

    我以为图片缓存是系统自动实现的呢

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

      并没有,搜了下发现也有一些插件,但是需要替换 image 标签,就抄了个代码,改了改。

      1.   Level 7
        Google Chrome 119 Google Chrome 119 Mac OS X 10.15 Mac OS X 10.15 cn中国–浙江–杭州 华数宽带

        我以为调用了 webview 类似的,然后自动调用浏览器缓存

        1. 公主 Queen 
          Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

          h5是可以的,基于服务器的缓存策略,但是 app 并不会缓存,需要自己去缓存文件。不然就会每次都从服务器加载。

        2. 公主 Queen 
          Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

          所以这个缓存使用宏定义包裹了一下,仅对 app 生效

        1. 公主 Queen 
          Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 移动

          说实话,真不爱看 csdn 的文章,不是针对作者,这个破网站现在是真烂。 bomb

    1. 公主 Queen 
      Google Chrome 119 Google Chrome 119 Windows 10 Windows 10 cn中国–山东–临沂 联通

      跨平台,支持小程序~~不过这个优化是针对app的。

    1. 公主 Queen 
      Google Chrome 119 Google Chrome 119 Windows 10 Windows 10 cn中国–山东–临沂 联通

      主要是我代码也是现抄的,哈哈哈。封装不了啊~~

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 移动

      其实流量还好,就是个头像也没多大,但是每次都下载,主要是加载速度有点慢。

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

      是哒,缓存功能有和没有差别还是比较大的。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注