使用angular和firebase上传多个文件

时间:2018-08-16 11:39:46

标签: firebase angular6

我正在尝试以角度6和firebase上传多个文件,然后将其存储在image属性中,以将其保存在真实数据库中。我已经尝试过以下代码:

HTML组件:

<div class="row">
  <div class="form-group col-6">
    <input type="file" (change)="upload($event)" class="form-control-file" multiple>
  </div>
  {{images}}
</div>

下面是.ts文件的代码:

images: string;
ref: AngularFireStorageReference;

task: AngularFireUploadTask;

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

uploadState: Observable<string>;
constructor(
  private router: Router,
  private authService: AccountService,
  private afStorage: AngularFireStorage)
{
}

ngOnInit() {

}

upload(event) {
  const id = Math.random().toString(36).substring(2);
  this.ref = this.afStorage.ref(id);
  this.task = this.ref.put(event.target.files[0]);
  this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));
  this.uploadProgress = this.task.percentageChanges();
  this.loadingFile = true;


  this.task.snapshotChanges().pipe(
    finalize(() => {
      this.loadingFile = false;
      this.downloadURL = this.ref.getDownloadURL();
      this.downloadURL.subscribe(url => (this.images = url));
    })
  )
    .subscribe();
}

谢谢!

0 个答案:

没有答案