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'; // 平臺(tái)絕對(duì)路徑 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) { // 下載失敗,刪除本地臨時(shí)文件 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("臨時(shí)文件刪除成功" + local_image_url); // 重新下載圖片 download_img(); }, function(e) { console.log("臨時(shí)文件刪除失敗" + local_image_url); }); }); } }else{ // 把下載成功的圖片顯示 // 將本地URL路徑轉(zhuǎn)換成平臺(tái)絕對(duì)路徑 console.log("下載成功" + local_image_url); imgObj.image = plus.io.convertLocalFileSystemURL(local_image_url); } }); download_task.start(); } }); } }, actions: { } }
總結(jié)
以上所述是小編給大家介紹的Vue+mui實(shí)現(xiàn)圖片的本地緩存示例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05vue3.0 CLI - 3.2 路由的初級(jí)使用教程
這篇文章主要介紹了vue3.0 CLI - 3.2 - 路由的初級(jí)使用教程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09Vue項(xiàng)目全局配置頁面緩存之按需讀取緩存的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目全局配置頁面緩存之實(shí)現(xiàn)按需讀取緩存的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起看看吧2018-08-08vue2中前端實(shí)現(xiàn)語音播報(bào)的詳細(xì)過程
vue中語音播報(bào),目前本人寫的過程中,遇到了兩種情況,第一種是后端直接返回一個(gè)mp3的播放url,第二種就是播報(bào)的內(nèi)容需要前端自己拼接的,關(guān)于兩種方法,我都說一下如何實(shí)現(xiàn),感興趣的朋友一起看看吧2024-07-07