91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue+mui實現圖片的本地緩存示例代碼

發布時間:2020-10-24 19:20:11 來源:腳本之家 閱讀:154 作者:一念執著_c 欄目:web開發

下面一段代碼給大家分享基于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實現圖片的本地緩存示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

满洲里市| 兖州市| 治县。| 新安县| 册亨县| 玛纳斯县| 杨浦区| 永安市| 蒙城县| 文成县| 武夷山市| 西华县| 宁都县| 辛集市| 思南县| 长沙市| 中宁县| 南部县| 泽州县| 南川市| 历史| 磐安县| 德江县| 三门县| 汕尾市| 墨玉县| 鄂温| 临江市| 唐山市| 新建县| 宜丰县| 德格县| 泗水县| 普陀区| 石柱| 奎屯市| 元江| 马关县| 错那县| 南川市| 章丘市|