uni-app 分享交流 h5+的Downloader下载网络图片缓存到本地的案例

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 分享交流 h5+的Downloader下载网络图片缓存到本地的案例 之前展示图片都是通过<img src="网络图片地址">, 每次都请求服务器, 加载比较慢;

如何做到显示图片的时候先从本地获取,没有则联网下载,缓存到本地;下次直接从本地拿,无需再联网;

看了文档,逛了论坛,没有找到现成的案例,折腾了老半天,走了好多弯路,把自己写的分享给大家,

我用Android机测试是成功的,苹果机还没有试,有问题欢迎指出:

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    </head>  

    <body>  
        <div class="mui-content">  
            <img id="img1"/>  
            <img id="img2"/>  
            <img id="img3"/>  
        </div>  
    </body>  

    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>   
    <script type="text/javascript" charset="utf-8">  
        mui.init(); //mui初始化  
        mui.plusReady(function() {  
            setImg("img1", "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_max.jpg");  
            setImg("img2", "http://client.bbzuche.com/resources/product/2014012094648828751145/20150611/logo.jpg");  
            setImg("img3", "http://www.bbzuche.com/images/tan.jpg");  
        });  

        /*<img>设置图片  
         *1.从本地获取,如果本地存在,则直接设置图片  
         *2.如果本地不存在则联网下载,缓存到本地,再设置图片  
         * */  
        function setImg(imgId, loadUrl) {  
                if (imgId == null || loadUrl == null) return;  
                //图片下载成功 默认保存在本地相对路径的"_downloads"文件夹里面, 如"_downloads/logo.jpg"  
                var filename = loadUrl.substring(loadUrl.lastIndexOf("/") + 1, loadUrl.length);  
                var relativePath = "_downloads/" + filename;  
                //检查图片是否已存在  
                plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {  
                    console.log("图片存在,直接设置=" + relativePath);  
                    //如果文件存在,则直接设置本地图片  
                    setImgFromLocal(imgId, relativePath);  
                }, function(e) {  
                    console.log("图片不存在,联网下载=" + relativePath);  
                    //如果文件不存在,联网下载图片  
                    setImgFromNet (imgId,loadUrl,relativePath);  
                });  
            }  

        /*给图片标签<img>设置本地图片  
         * imgId 图片标签<img>的id  
         * relativePath 本地相对路径 例如:"_downloads/logo.jpg"  
         */  
        function setImgFromLocal(imgId, relativePath) {  
                //本地相对路径("_downloads/logo.jpg")转成SD卡绝对路径("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/logo.jpg");  
                var sd_path = plus.io.convertLocalFileSystemURL(relativePath);  
                //给<img>设置图片  
                $id(imgId).setAttribute("src", sd_path);  
            }  

        /*联网下载图片,并设置给<img>*/  
        function setImgFromNet (imgId,loadUrl,relativePath) {  
            //先设置下载中的默认图片  
            $id(imgId).setAttribute("src", "../images/loading.png");  
            //创建下载任务  
            var dtask = plus.downloader.createDownload(loadUrl, {}, function(d, status) {  
                if (status == 200) {  
                    //下载成功  
                    console.log("下载成功=" + relativePath);  
                    setImgFromLocal(imgId, d.filename);  
                } else {  
                    //下载失败,需删除本地临时文件,否则下次进来时会检查到图片已存在  
                    console.log("下载失败=" + status+"=="+relativePath);  
                    //dtask.abort();//文档描述:取消下载,删除临时文件;(但经测试临时文件没有删除,故使用delFile()方法删除);  
                    if (relativePath!=null)  
                        delFile(relativePath);  
                }  
            });  
            //启动下载任务  
            dtask.start();  
        }  

        /*删除指定文件*/  
        function delFile(relativePath) {  
            plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {  
                entry.remove(function(entry) {  
                    console.log("文件删除成功==" + relativePath);  
                }, function(e) {  
                    console.log("文件删除失败=" + relativePath);  
                });  
            });  
        }  

        /*根据id查找元素*/  
        function $id(id) {  
            return document.getElementById(id);  
        }  

    </script>  
</html>

Harmonyos Next教程
1 回复

在uni-app中，使用H5+的Downloader模块可以很方便地将网络图片缓存到本地。以下是一个完整的代码案例，演示了如何下载并缓存网络图片到本地文件系统中。

首先，确保你的uni-app项目已经配置了manifest.json中的5+ App相关权限，特别是文件系统访问权限和网络访问权限。

// manifest.json
{
  "mp-weixin": {},
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": [
          "android.permission.INTERNET",
          "android.permission.WRITE_EXTERNAL_STORAGE"
        ]
      }
    }
  }
}

接下来，在页面的脚本部分，使用Downloader模块下载图片并保存到本地。

// pages/index/index.vue
<template>
  <view>
    <button @click="downloadImage">下载图片</button>
  </view>
</template>

<script>
export default {
  methods: {
    downloadImage() {
      const imageUrl = 'https://example.com/path/to/your/image.jpg'; // 替换为实际图片URL
      const taskId = plus.downloader.createDownload(imageUrl, {}, (task, status) => {
        if (status === 200) {
          const savedPath = task.filename; // 本地保存路径
          console.log('图片已保存到：', savedPath);
          // 可以在这里进行后续操作，比如显示下载的图片
          // uni.previewImage({urls: [savedPath]});
        } else {
          console.error('下载失败：', status);
        }
      });

      // 开始下载任务
      taskId.start();
    }
  }
}
</script>

<style>
/* 添加你的样式 */
</style>

在这个例子中，我们首先定义了一个按钮，点击按钮时会调用downloadImage方法。在downloadImage方法中，我们使用plus.downloader.createDownload方法创建一个下载任务，指定了图片的URL和下载成功后的回调函数。回调函数中的task.filename包含了图片在本地的保存路径。

注意，这个代码示例是基于H5+扩展API的，因此它只能在5+ App环境中运行（如Android和iOS的uni-app应用），不能在纯H5环境中运行。

另外，确保你的服务器支持跨域访问，否则可能会因为CORS策略而导致下载失败。如果需要在H5环境中实现类似功能，你可能需要使用浏览器的Fetch API或XMLHttpRequest，并结合File API来处理文件保存，但这通常涉及更多的浏览器兼容性和权限处理。

回到顶部