Vue+mui实现图片的本地缓存示例代码
下面一段代码给大家分享基于Vue+mui实现图片的本地缓存，具体代码如下所示：
constmenu={
state:{
products:{},
GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG']
},
mutations:{
get_product:function(state,products){
//商品列表
state.products=products;
for(leti=0;imd5
//缓存目录_downloads/image/(md5).jpg
letimage_url=imgObj.image;
letimage_md5=md5(image_url);
//缓存本地图片url
letlocal_image_url='_downloads/image/'+image_md5+'.jpg';
//平台绝对路径
letabsolute_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("ResolvefileURLfailed:");
download_img();
});
functiondownload_img(){
//filename:下载任务在本地保存的文件路径
letdownload_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实现图片的本地缓存示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。