Vue+mui는 이미지의 로컬 캐싱을 구현합니다.

이 글에서는 이미지의 로컬 캐싱을 구현하기 위한 Vue+mui의 예제 코드를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요한 친구가 참고할 수 있습니다.

다음 코드는 이미지 구현 방법을 공유하기 위한 것입니다. Vue+mui.Local 캐시를 기반으로 한 구체적인 코드는 다음과 같습니다.

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: {
 }
}

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목하세요!

관련 권장사항:

vue-cli에서 시뮬레이션된 데이터를 분석하는 두 가지 방법

VUE에서 일반적으로 사용되는 여러 가져오기(모듈, 파일) 소개

vue 설정 라우팅 로그인 방법

위 내용은 Vue+mui는 이미지의 로컬 캐싱을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!