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

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;

http:// 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实现图片的本地缓存示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。