您好,登錄后才能下訂單哦!
下面一段代碼給大家分享基于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: { } }
總結
以上所述是小編給大家介紹的Vue+mui實現圖片的本地緩存示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。