php长按图片保存mui,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;
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中文网!
相关推荐:
php长按图片保存mui,Vue+mui实现图片的本地缓存相关推荐
- python3将base64格式的图片保存为MD5值的图片
python3将base64格式的图片保存为MD5值的图片 import os, base64 import cv2 import numpy as np import hashlib# QQ 273 ...
- java图片保存到数据库_java中将图片保存到数据库中
在实际的开发中,我们可能需要将图片.影音等文件直接保存到数据库中,然后通过编程方式将数据读出进行使用.例如将读出的图片数据显示出来,将读出的电影文件播放出来. 二进制数据直接保存到文件和从文件中读出非 ...
- delphi 安卓图片保存数据库_delphi数据库存储图片
delphi数据库存储图片 发布时间:2020-06-24 19:16:33 来源:51CTO 阅读:411 作者:鹅倌 栏目:数据库 --存 str_sql := 'update photo set ...
- MATLAB强化学习四:图片保存fig文件
MATLAB强化学习四:图片保存fig文件 saveas命令图片保存fig文件 saveas(gcf,'保存文件名称')
- 26.Android 下载图片保存到相册
26.Android 下载图片保存到相册 Android 下载图片保存到相册 前言 实现思路 自定义Dialog 自定义Handler 自定义AsyncTask AndroidManifest配置权限 ...
- word保存为html不压缩图片大小,如何一键保存word文档中的图片?只需把.docx后缀改成压缩格式.zip即可 ......
有时候我们在网上下载一篇Word文档,里面有很多张图片,我们想要将这些图片保存下来.如果是单张图片保存,我们可以选中图片,然后点击鼠标右键,选择[另存为图片]即可,如下图所示. 但如果是需要将所有图片 ...
- Vue+mui实现图片的本地缓存
效果: const menu = {state: {products: {},GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG']},mutations: {get ...
- Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹
Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹 前言 一.Vue 前端 一.五 注意!!! 二.Springboot 后端 引入Base64依赖 在项目里新建 ut ...
- mui + vue 模板
示例代码: (function(mui, doc) {// 定义全局变量(计时器)var timer;// mui初始化mui.init();// 创建vue的实例var app = new Vue( ...
最新文章
- 【AI】caffe使用步骤(四):训练和预测
- Spring Boot 之构建Hello Word项目
- 2019年Reddit机器学习板块17个最佳项目:最新代码、资源应有尽有
- 固态存储作缓存 提升性能有绝招
- 强化学习核心文章一百篇
- Django入门-项目创建与初识子应用
- 算法-低位优先的字符串排序
- 程序员必看!Android面试10大知识点总结宝典助你通关!年薪50W
- 最新版Spring Cloud Alibaba微服务架构-Ribbon负载均衡篇
- php curl 下载图片 花,PHP curl下载图片的方法
- 博客园php教程,PHP仿博客园,个人博客(1)_PHP教程
- 织梦html底部文件,织梦dedecms程序如何给网站底部添加360监控的步骤
- python处理word文档中表格 添加一列_Python操作word文档插入图片和表格的实例演示...
- 积分上限函数的导数例题 笔记
- IP归属地显示的简单实现代码
- kettle使用命令行来运行ktr和kjb文件
- HTML网页字体动态显示
- 【人工智能】人工智能是什么?如何入门人工智能?我们为什么要学人工智能?
- 商业分析师应如何构建一个商业故事
- 全球及中国包装产业需求规模与投资发展策略研究报告2022版
热门文章
- LINUX操作系统的内核编译内幕详解一
- Java学习笔记_180704_final和static关键字
- LeetCode60:Permutation Sequence
- 15.01.29-MVC中用Areas分解项目
- SpringMVC杂记(1) 使用阿里巴巴的fastjson
- vcftools报错:Writing PLINK PED and MAP files ... Error: Could not open temporary file.解决方案
- FreeImage编译及遇到问题解决
- 【推荐算法】点击率模型特征交叉方向的发展及CAN模型介绍
- 【推荐实践】阿里文娱面向用户增长的信息流分发机制
- 【AutoML白皮书】:感知、认知、决策算法布局提升企业决策水平.pdf(附下载链接)...