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

 更新时间:2018年05月24日 08:41:14   作者:一念执着_c  
这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

下面一段代码给大家分享基于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实现图片的本地缓存示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue3(ts)类型EventTarget上不存在属性value的问题

    vue3(ts)类型EventTarget上不存在属性value的问题

    这篇文章主要介绍了vue3(ts)类型EventTarget上不存在属性value的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 浅谈Vue.js之初始化el以及数据的绑定说明

    浅谈Vue.js之初始化el以及数据的绑定说明

    今天小编就为大家分享一篇浅谈Vue.js之初始化el以及数据的绑定说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue2中使用AntV 以g2plot为实例

    vue2中使用AntV 以g2plot为实例

    这篇文章主要介绍了vue2中使用AntV 以g2plot为实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue路由之JWT身份认证的实现方法

    Vue路由之JWT身份认证的实现方法

    这篇文章主要介绍了Vue路由之JWT身份认证的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 在vue中使用v-bind:class的选项卡方法

    在vue中使用v-bind:class的选项卡方法

    今天小编就为大家分享一篇在vue中使用v-bind:class的选项卡方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解决axios发送post请求返回400状态码的问题

    解决axios发送post请求返回400状态码的问题

    今天小编就为大家分享一篇解决axios发送post请求返回400状态码的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue cli4中mockjs在dev环境和build环境的配置详情

    vue cli4中mockjs在dev环境和build环境的配置详情

    这篇文章主要介绍了vue cli4中mockjs在dev环境和build环境的配置详情,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果

    vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果

    这篇文章主要介绍了vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • petite vue的使用示例详解

    petite vue的使用示例详解

    这篇文章主要为大家介绍了petite vue的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue实现进入某个页面后替换地址栏路径的操作方法

    vue实现进入某个页面后替换地址栏路径的操作方法

    vue页面在实际开发中,经常会遇到改变url参数,重新加载页面数据的需求,但是只改变页面url并不会触发组件的生命周期,这就需要用其他方法来实现了,本文重点介绍vue实现进入某个页面后替换地址栏路径的操作方法,感兴趣的朋友跟随小编一起看看吧
    2024-04-04

最新评论