AngularFireStorage上传多个图像?

时间:2018-08-01 23:35:29

标签: javascript angular firebase firebase-storage angularfire2

我正在使用Angularfire2指南上传图像:https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md

我已将其付诸实践,并且每次操作只能上传一张图片。是否可以加载多个图像?我该如何实现?

component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage } from 'angularfire2/storage';
import { Observable } from '../../../../node_modules/rxjs';
import { finalize } from 'rxjs/operators';

@Component({
selector: 'app-root',
template: `
  <input type="file" (change)="uploadFile($event)" />
  <div>{{ uploadPercent | async }}</div>
  <a [href]="downloadURL | async">{{ downloadURL | async }}</a>
`
})

export class AppComponent {

uploadPercent: Observable<number>;
downloadURL: Observable<string>;

constructor(private storage: AngularFireStorage) {}

uploadFile(event) {
  const file = event.target.files[0];
  const filePath = 'name-your-file-path-here';
  const fileRef = this.storage.ref(filePath);
  const task = this.storage.upload(filePath, file);

  // observe percentage changes
  this.uploadPercent = task.percentageChanges();
  // get notified when the download URL is available
  task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = fileRef.getDownloadURL() )
 )
.subscribe()
}
}

0 个答案:

没有答案