Vue+mui實(shí)現(xiàn)圖片的本地緩存示例代碼
下面一段代碼給大家分享基于Vue+mui實(shí)現(xiàn)圖片的本地緩存,具體代碼如下所示:
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{
//添加默認(rèn)圖片
state.products[i]['image'] = require("../assets/file.png");
}
}
},
imgCache: function (state,imgObj) {
mui.plusReady(function(){
// 1. 轉(zhuǎn)換網(wǎng)絡(luò)圖片地址為本地緩存圖片路徑,判斷該圖片是否存在本地緩存
// 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:下載任務(wù)在本地保存的文件路徑
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路徑轉(zhuǎn)換成平臺絕對路徑
console.log("下載成功" + local_image_url);
imgObj.image = plus.io.convertLocalFileSystemURL(local_image_url);
}
});
download_task.start();
}
});
}
},
actions: {
}
}
總結(jié)
以上所述是小編給大家介紹的Vue+mui實(shí)現(xiàn)圖片的本地緩存示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue3(ts)類型EventTarget上不存在屬性value的問題
這篇文章主要介紹了vue3(ts)類型EventTarget上不存在屬性value的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
淺談Vue.js之初始化el以及數(shù)據(jù)的綁定說明
今天小編就為大家分享一篇淺談Vue.js之初始化el以及數(shù)據(jù)的綁定說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue路由之JWT身份認(rèn)證的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue路由之JWT身份認(rèn)證的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在vue中使用v-bind:class的選項(xiàng)卡方法
今天小編就為大家分享一篇在vue中使用v-bind:class的選項(xiàng)卡方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決axios發(fā)送post請求返回400狀態(tài)碼的問題
今天小編就為大家分享一篇解決axios發(fā)送post請求返回400狀態(tài)碼的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情
這篇文章主要介紹了vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
vue實(shí)現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果
這篇文章主要介紹了vue實(shí)現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
vue實(shí)現(xiàn)進(jìn)入某個頁面后替換地址欄路徑的操作方法
vue頁面在實(shí)際開發(fā)中,經(jīng)常會遇到改變url參數(shù),重新加載頁面數(shù)據(jù)的需求,但是只改變頁面url并不會觸發(fā)組件的生命周期,這就需要用其他方法來實(shí)現(xiàn)了,本文重點(diǎn)介紹vue實(shí)現(xiàn)進(jìn)入某個頁面后替換地址欄路徑的操作方法,感興趣的朋友跟隨小編一起看看吧2024-04-04

