首页 > 编程 > JavaScript > 正文

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

2019-11-19 13:47:19
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表