效果：

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).jpglet image_url = imgObj.image;let image_md5 = md5(image_url);// 緩存本地圖片urllet 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实现图片的本地缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。