如何使使用ng2-file-upload uploader的ionic 4 App持久化?

时间:2019-09-25 17:23:40

标签: angular ionic4 ng2-file-upload

我要完成的工作是在离线模式下使用ng2-file-upload。您的用户必须能够添加文件并将页面留在ionic 4应用程序上,然后当他再次打开页面时,他可以在上次访问的上传列表中看到文件。理想情况下,他将能够关闭该应用程序,并在重新启动时查看上传列表中的文件。我愿意使用文件系统,但不确定如何实现。

.html

<div class="file-input-container">
  <br>
  <label>
    <input type="file" ng2FileSelect [uploader]="uploader" multiple />
    Add Photos or Files
  </label>
</div>
<br>
  <ion-list>
    <ion-list-header>
      <ion-label>Files: {{ uploader?.queue?.length }}</ion-label>
    </ion-list-header>
      <ion-item *ngFor="let item of uploader.queue">
        <ion-label>{{ item?.file?.name }}</ion-label>
        <ion-button fill="outline" color="danger" slot="end" (click)="item.remove()">Delete</ion-button>
      </ion-item>
  </ion-list>

.ts

import { Component } from '@angular/core';
import { FileUploader, FileLikeObject } from 'ng2-file-upload';

@Component({
  selector: 'app-multi-file-upload',
  templateUrl: './multi-file-upload.component.html',
  styleUrls: ['./multi-file-upload.component.scss'],
})
export class MultiFileUploadComponent {

  public uploader: FileUploader = new FileUploader({});
  public hasBaseDropZoneOver: boolean = false;

  constructor() { 

  }

  getFiles(): FileLikeObject[] {
    return this.uploader.queue.map((fileItem) => {
      return fileItem.file;
    });
  }

  fileOverBase(ev): void {
    this.hasBaseDropZoneOver = ev;
  }

  reorderFiles(reorderEvent: CustomEvent): void {
    let element = this.uploader.queue.splice(reorderEvent.detail.from, 1)[0];
    this.uploader.queue.splice(reorderEvent.detail.to, 0, element);
  }
}

0 个答案:

没有答案