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).jpglet image_url           = imgObj.image;let image_md5           = md5(image_url);// 缓存本地图片urllet 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: {}
}