1. 程式人生 > >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: { } }

相關推薦

Vue+mui實現圖片本地快取

效果: const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_p

iOS開發------實現圖片下載快取本地

      在開發過程中很多人都會使用SDWebImage來進行網路圖片的快取,說實話,這個第三方也確實好用,但依照本人的性格,還是一直在想做一版自己的本地快取,比如下載的圖片存到本地,下次再有相同的圖片需要載入,就不用再花冤枉流量來下載了,這次的嘗試雖然相比SDWebIm

vue實現圖片全屏縮放預覽,支援移動端

# 安裝 npm install vue-photo-preview --save   # 引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(pr

Java ConcurrentHashmap實現Localcache本地快取

很多場景下,有些請求的資料,是不會經常改變的,這種時候,為了減少資料庫的查詢壓力,可以將這一部分資料放入快取中,直接從快取中讀取。除了一些像Redis等快取外,還可以通過本地記憶體,作為快取。下邊將使用ConcurrentHashMap來實現本地快取。 >相關的技術:

vue-lazyload實現圖片懶載入的方式

1、安裝vue-lazyload npm install --save vue-lazyload 2、在main.js中引入並申明使用 (1)引入 import VueLazyload from 'vue-lazyload' (2)申明使用 Vue.use(Vue

vue-router 實現元件的快取之 keep-alive

版權宣告:本文為博主原創文章,未經博主允許不得轉載。    https://blog.csdn.net/qq_30114149/article/details/78415030 一、keep-alive簡介  keep-alive是Vue內建的一個元件,可以使

vue實現圖片丶檔案上傳

 html頁面  <input type="file" value=""  id="file"  @change='onUpload'>//注意不能帶括號 js程式碼 methods: {

針對單張大圖片本地快取,依賴於DClound平臺的H5+plus技術

需求 最近專案中遇到移動端首頁需要載入一些圖片,並且有些圖片很大並且更新不頻繁 原理 原理就是根據網路圖片的的url來判定本地是否存在該圖片,不存在就根據網路圖片的url下載該圖片,並把頁面上的圖片路徑替換成本地快取路徑;如果存在就直接使用本地圖片路徑。 準備 需要學習的

用Glide去實現圖片快取和瀑布流

效果圖: 上面的加號和回收箱能實現載入一個圖片和刪除一個圖片,結合上一篇實現的圖片的載入用Glide實現圖片的快取,這次我們用RecyclerView來做,下面直接上程式碼,有問題留言大家一起探討… MainActivity程式碼: public

Vue.js實現圖片的隨意拖動

主要程式碼如下: <template> <div id="test_3"> <img src="../assets/img/photo.jpg

圖片本地快取

圖片懶載入是通過判斷http圖片檔案是否存在你的本地,如果未存在會將圖片快取到本地,如果已經存在就不做快取,使用到的技術md5加密,mui、html5+. 應客戶的要求,需要做懶載入,本人也找了一段時間才找到這個程式碼,因為是非同步載入的,為了配合mui,我添

vue + swiper 實現圖片輪播

export default { data () { return { timer: null, //定時器 mark: 0, //比對圖片索引的變數 imgArray: [//圖片路徑 require('../../assets/images

實現 Java 本地快取,該從這幾點開始

快取,我相信大家對它一定不陌生,在專案中,快取肯定是必不可少的。市面上有非常多的快取工具,比如 Redis、Guava Cache 或者 EHcache。對於這些工具,我想大家肯定都非常熟悉,所以今天我們不聊它們,我們來聊一聊如何實現本地快取。參考上面幾種工具,要實現一個較好的本地快取,平頭哥認為要從以下三個

Flutter 實現圖片快取本地

網上可能有很多實現的外掛,有些動不動就上千行程式碼, 其實很簡單 只需要在原始碼的基礎上加一個本地快取就行, 畢竟原始碼是最可靠的  https://github.com/dikeboy/flutter-cache-image-local Flutter  自帶的有2個 圖片的Wid

IOS開發之非同步載入網路圖片快取本地實現瀑布流(一)

</pre><pre name="code" class="objc"></pre><pre name="code" class="objc">在前面的一篇部落格中,我寫了一個瀑布流照片牆的程式,由於之前的程式載入的圖片是本

微信端調取相冊和攝像頭,實現圖片上傳,並上傳到本地服務器

配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時,遇到了圖片上傳的問題,查看了微信的開發者文檔,裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC

搞清Image加載事件(onload)、加載狀態(complete)後,實現圖片本地預覽,並自適應於父元素內

斷圖 idt ont election href this 出現 alpha ole onload與complete介紹 complete只是HTMLImageElement對象的一個屬性,可以判斷圖片加載完成,不管圖片是不是有緩存;而onload則是這個Image對象的

Unity3d-WWW實現圖片資源顯示以及保存和本地加載

editor call clas amp private out .text sset bytes 本文固定連接:http://blog.csdn.net/u013108312/article/details/52712844 WWW實現圖片資源顯示以及保存和本地加

vue實現圖片路徑傳送

com nts rip lan height bin eve template image <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><t

vue實現圖片放大

script emit fun box () 實現 window 放大 msg <script> var Event = new Vue(); //組件A var A = { data: function() { return {