Vue+mui implémente la mise en cache locale des images

Cet article présente principalement l'exemple de code de Vue+mui pour implémenter la mise en cache locale des images. Il est très bon et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Le code suivant est partagé avec. vous, basé sur Vue+mui, implémente la mise en cache locale des images. Le code spécifique est le suivant :

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][&#39;image&#39;] != null){
        // state.products[i][&#39;image&#39;] = state.GLOBAL_CONFIG[&#39;base64Header&#39;] + state.products[i][&#39;image&#39;];
        //下载图片到本地
        this.commit(&#39;imgCache&#39;,state.products[i]);
      }else{
        //添加默认图片
        state.products[i][&#39;image&#39;] = 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   = &#39;_downloads/image/&#39;+image_md5+&#39;.jpg&#39;;
      // 平台绝对路径
      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(&#39;下载失败,status&#39;+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: {
 }
}

Ce qui précède est l'intégralité du contenu de. cet article. J'espère qu'il sera utile à tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Deux méthodes pour analyser les données de simulation dans vue-cli

À propos de plusieurs méthodes couramment utilisées dans VUE Introduction à diverses méthodes d'introduction à l'importation (module, fichier)

Méthode Vue de définition des autorisations de connexion pour le routage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!