Vue+mui实现图片的本地缓存示例代码
网络编程 2021-07-04 16:45www.168986.cn编程入门
这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
狼蚁网站SEO优化一段代码给大家分享基于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.mit('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实现图片的本地缓存示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
上一篇:vue2单元测试环境搭建
下一篇:vue组件name的作用小结
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程