Vue+mui实现图片的本地缓存示例代码


Posted in Javascript onMay 24, 2018

下面一段代码给大家分享基于Vue+mui实现图片的本地缓存,具体代码如下所示:

const menu = {
 state: {
  products: {},
  GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG']
 },
 mutations: {
  get_product: function (state, products) {
    //商品列表
    state.products = products;
    for(let i = 0; i < state.products.length; i++){
      if(state.products[i]['image'] != null){
        // state.products[i]['image'] = state.GLOBAL_CONFIG['base64Header'] + state.products[i]['image'];
        //下载图片到本地
        this.commit('imgCache',state.products[i]);
      }else{
        //添加默认图片
        state.products[i]['image'] = require("../assets/file.png");
      }
    }
  },
  imgCache: function (state,imgObj) {
    mui.plusReady(function(){
      // 1. 转换网络图片地址为本地缓存图片路径,判断该图片是否存在本地缓存
      // http://...jpg -> md5
      // 缓存目录 _downloads/image/(md5).jpg
      let image_url      = imgObj.image;
      let image_md5      = md5(image_url);
      // 缓存本地图片url
      let local_image_url   = '_downloads/image/'+image_md5+'.jpg';
      // 平台绝对路径
      let absolute_image_path = plus.io.convertLocalFileSystemURL(local_image_url);
      console.log(absolute_image_path);
      // 判断本地是否存在该文件,存在就就直接使用,否则就下载
      plus.io.resolveLocalFileSystemURL( absolute_image_path, function( entry ) {
        if(entry){
          imgObj.image = plus.io.convertLocalFileSystemURL(local_image_url);
        }else{
          download_img();
        }
      }, function ( e ) {
        console.log("Resolve file URL failed: ");
        download_img();
      } );
      function download_img(){
        // filename:下载任务在本地保存的文件路径
        let download_task = plus.downloader.createDownload(image_url, {
          filename: local_image_url
        }, function(download, status) {
          // 下载失败,删除本地临时文件
          if(status != 200){
            console.log('下载失败,status'+status);
            if(local_image_url != null){
              plus.io.resolveLocalFileSystemURL(local_image_url, function(entry) {
                entry.remove(function(entry) {
                  console.log("临时文件删除成功" + local_image_url);
                  // 重新下载图片
                  download_img();
                }, function(e) {
                  console.log("临时文件删除失败" + local_image_url);
                });
              });
            }
          }else{
            // 把下载成功的图片显示
            // 将本地URL路径转换成平台绝对路径
            console.log("下载成功" + local_image_url);
            imgObj.image = plus.io.convertLocalFileSystemURL(local_image_url);
          }
        });
        download_task.start();
      }    
    });
  }
 },
 actions: {
 }
}

总结

以上所述是小编给大家介绍的Vue+mui实现图片的本地缓存示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
JavaScript原型链详解
Nov 07 Javascript
vue组件name的作用小结
May 23 #Javascript
linux 后台运行node服务指令方法
May 23 #Javascript
node.js部署之启动后台运行forever的方法
May 23 #Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
让Vue也可以使用Redux的方法
May 23 #Javascript
微信小程序排坑指南详解
May 23 #Javascript
You might like
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
php实现socket推送技术的示例
2017/12/20 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python中assert用法实例分析
2015/04/30 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
TensorFlow实现Logistic回归
2018/09/07 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python如何实现动态数组
2019/11/02 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
linux面试相关问题
2012/08/11 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
客户代表自我评价范例
2013/09/24 职场文书
旅游投诉信范文
2015/07/02 职场文书