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 相关文章推荐
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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.ini中文版(2)
2006/10/09 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript中常用的运算符小结
2012/01/18 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python del()函数用法
2013/03/24 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python3爬虫怎样构建请求header
2018/12/23 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
python opencv如何实现图片绘制
2020/01/19 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
什么是事务?事务有哪些性质?
2012/03/11 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
关于元旦的广播稿
2014/02/16 职场文书
yy生日主持词
2014/03/20 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
群众路线剖析材料
2014/09/30 职场文书
九不准学习心得体会
2016/01/23 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript