在Angular 8中恢复图像的完整路径

【问题标题】：Recover full path of an image in Angular 8在Angular 8中恢复图像的完整路径
【发布时间】：2020-07-21 18:36:52
【问题描述】：

我正在使用 PWA 在 Angular 8 中构建应用程序。这是一种旅行退款，用户通过应用程序发送他的发票图片。然后在在线时保存在数据库中，如果用户离线，应用程序将保存在 IndexedDb 中。再次联机时，该应用会在 IDB 中查找待上传的内容，然后进行查找。我不想保存图像本身，因为 IDB 在某些浏览器中的缓存内存有限，所以我选择保存 图像路径 以便应用程序可以找到以后再说吧。

这就是我的问题出现的时候，我尝试将图像完整路径保存在IDB中以便稍后在线获取，但某些浏览器不允许安全原因。那么，还有其他方法吗？

【问题讨论】：

stackoverflow.com/questions/57917599/…

标签： html angular typescript progressive-web-apps indexeddb

【解决方案1】：

正如 talhature 所述，无法保存 URL。这也是出于安全原因，网站应该无法读取文件系统。

您可以像这样检索文件：

HTML：

<input type="file" name="file" id="file" (change)="onFileChanged($event)"/>

public files: any[];

contructor() { this.files = []; }

onFileChanged(event: any) {
  this.files = event.target.files;
  this.files.forEach(file => setData(file));
}

如果您能够将 blob 持久化到本地存储，则可以使用在线和离线事件来区分：

 let online = window.navigator.onLine;

 function handleOnline() {
   const data = JSON.parse(localStorage.getItem('data'));
   
   // post to backend

   localSorage.setItem('data', null);
   online = true;
 }

 function setData(data) {
   if (online) {
     
   // post to backend
   
   } else {
      localSorage.setItem('data', JSON.parse(data))
   }
 }

 window.addEventListener('online',  handleOnline);
 window.addEventListener('offline', () => online = false);

【讨论】：