SoFunction
Updated on 2025-04-05

Vue+mui implements local cache example code for pictures

The following code is to share with you the local cache of images based on Vue+mui. The specific code is as follows:

const menu = {
 state: {
  products: {},
  GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG']
 },
 mutations: {
  get_product: function (state, products) {
    //Product List     = products;
    for(let i = 0; i < ; i++){
      if([i]['image'] != null){
        // [i]['image'] = state.GLOBAL_CONFIG['base64Header'] + [i]['image'];
        //Download the picture to the local area        ('imgCache',[i]);
      }else{
        //Add default image        [i]['image'] = require("../assets/");
      }
    }
  },
  imgCache: function (state,imgObj) {
    (function(){
      // 1. Convert the network image address to the local cache image path to determine whether the image exists in a local cache      // http://...jpg -> md5
      // Cache directory _downloads/image/(md5).jpg      let image_url      = ;
      let image_md5      = md5(image_url);
      //Cached local image url      let local_image_url   = '_downloads/image/'+image_md5+'.jpg';
      // Absolute path of the platform      let absolute_image_path = (local_image_url);
      (absolute_image_path);
      // Determine whether the file exists locally. If it exists, use it directly, otherwise download it      ( absolute_image_path, function( entry ) {
        if(entry){
           = (local_image_url);
        }else{
          download_img();
        }
      }, function ( e ) {
        ("Resolve file URL failed: ");
        download_img();
      } );
      function download_img(){
        // filename: The file path saved locally by the download task        let download_task = (image_url, {
          filename: local_image_url
        }, function(download, status) {
          // Download failed, delete local temporary files          if(status != 200){
            ('Download failed, status'+status);
            if(local_image_url != null){
              (local_image_url, function(entry) {
                (function(entry) {
                  ("Temporary file deletion successful" + local_image_url);
                  // Re-download the picture                  download_img();
                }, function(e) {
                  ("Temporary file deletion failed" + local_image_url);
                });
              });
            }
          }else{
            // Show the pictures that were successfully downloaded            // Convert local URL path to platform absolute path            ("Download successfully" + local_image_url);
             = (local_image_url);
          }
        });
        download_task.start();
      }    
    });
  }
 },
 actions: {
 }
}

Summarize

The above is the local cache sample code for Vue+mui implementation pictures introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!