如何在Ionic中清除图像缓存

npm install @ionic/storage

import { Storage } from '@ionic/storage';

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { File } from '@ionic-native/file/ngx';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ImageCacheService {

  constructor(
    private storage: Storage,
    private file: File,
    private http: HttpClient
  ) { }

  // 下载并缓存图片
  cacheImage(imageUrl: string): Observable<string> {
    return new Observable<string>(observer => {
      // 检查本地是否已缓存该图片
      this.storage.get(imageUrl).then(imagePath => {
        if (imagePath) {
          observer.next(imagePath);  // 已缓存，直接返回缓存路径
          observer.complete();
        } else {
          // 未缓存，开始下载图片
          this.downloadImage(imageUrl).subscribe(
            path => {
              observer.next(path);
              observer.complete();
            },
            error => {
              observer.error(error);
            }
          );
        }
      });
    });
  }

  // 下载图片
  downloadImage(imageUrl: string): Observable<string> {
    return new Observable<string>(observer => {
      const fileName = imageUrl.substr(imageUrl.lastIndexOf('/') + 1); // 从URL中提取文件名
      const filePath = this.file.dataDirectory + fileName;  // 图片存储路径
      
      this.fileTransfer.download(imageUrl, filePath).then(entry => {
        const imagePath = entry.toURL();
        // 将缓存路径保存到本地存储
        this.storage.set(imageUrl, imagePath);
        observer.next(imagePath);
        observer.complete();
      }).catch(error => {
        observer.error(error);
      });
    });
  }

  // 清除图片缓存
  clearImageCache(): Observable<void> {
    return new Observable<void>(observer => {
      // 遍历本地存储中的所有缓存项，并删除对应的图片文件
      this.storage.forEach((value, key, index) => {
        this.file.removeFile(this.file.dataDirectory, value.substr(value.lastIndexOf('/') + 1));
      }).then(() => {
        // 清空本地存储
        this.storage.clear().then(() => {
          observer.next();
          observer.complete();
        }).catch(error => {
          observer.error(error);
        });
      }).catch(error => {
        observer.error(error);
      });
    });
  }
}

import { Component } from '@angular/core';
import { ImageCacheService } from './image-cache.service';

@Component({
  selector: 'app-home',
  template: `
    <button (click)="clearCache()">清除图像缓存</button>
  `
})
export class HomePage {

  constructor(private imageCacheService: ImageCacheService) { }

  clearCache() {
    this.imageCacheService.clearImageCache().subscribe(
      () => {
        console.log('图像缓存已清除');
      },
      error => {
        console.error('清除图像缓存失败:', error);
      }
    );
  }
}