这篇文章主要介绍了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;
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: {
}
}以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
立即学习“前端免费学习笔记(深入)”;
关于VUE中常用的几种import(模块、文件)引入方式的介绍
以上就是Vue+mui实现图片的本地缓存的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号