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 相关文章推荐
告诉你什么是javascript的回调函数
Sep 04 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
详解Javascript继承的实现
Mar 25 Javascript
js实现二级导航功能
Mar 03 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
vue综合组件间的通信详解
Nov 06 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
Js经典案例的实例代码
May 10 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
js回调函数原理与用法案例分析
Mar 04 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实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python  连接字符串(join %)
2008/09/06 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python实现多进程通信实例分析
2019/09/01 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
机电工程学生自荐信范文
2013/12/07 职场文书
经理助理岗位职责
2014/03/05 职场文书
表彰大会主持词
2014/03/26 职场文书
雷人标语集锦
2014/06/19 职场文书
行政经理岗位职责
2015/04/15 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
三国演义读书笔记
2015/06/25 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
详解python的内存分配机制
2021/05/10 Python