我一直在努力寻找这个问题的答案。大多数示例（包括AngularFire2文档和angularfirebase.com的出色教程）仅关注一次上传一个文件。我想建立一个cms照相馆，至少可以这样说，这样的选择效率不高...
对于我最初的问题，我从莱昂·拉德利（Leon Radley）那里得到了一个答案，为此，它有助于重新思考该方法。
尽管如此，该解决方案对我而言并不是最佳的。我决定回答我自己的问题，这样可能会对某人有所帮助，甚至更好，某人会提出更好的解决方案。
随着我提出更多功能，我将更新我的答案。我只是在重写angularfirebase.com提供的解决方案以利用文件数组。
请注意，这里使用了自定义删除事件和FileList指令，有关更多详细信息，请参阅源代码。
import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.scss']
})
export class FileUploadComponent {
// Main task
task: AngularFireUploadTask;
// Progress monitoring
percentage: Observable<number>;
snapshot: Observable<any>;
// Download URL
downloadURL: Observable<string>;
// State for dropzone CSS toggling
isHovering: boolean;
constructor(private storage: AngularFireStorage, private db: AngularFirestore) { }
toggleHover(event: boolean) {
this.isHovering = event;
}
startUpload(event: FileList) {
// The File object
const file = event.item(0)
// Client-side validation example
if (file.type.split('/')[0] !== 'image') {
console.error('unsupported file type :( ')
return;
}
// The storage path
const path = `test/${new Date().getTime()}_${file.name}`;
// Totally optional metadata
const customMetadata = { app: 'My AngularFire-powered PWA!' };
// The main task
this.task = this.storage.upload(path, file, { customMetadata })
// Progress monitoring
this.percentage = this.task.percentageChanges();
this.snapshot = this.task.snapshotChanges()
// The file's download URL
this.downloadURL = this.task.downloadURL();
}
// Determines if the upload task is active
isActive(snapshot) {
return snapshot.state === 'running' && snapshot.bytesTransferred < snapshot.totalBytes
}
}
<div class="dropzone"
dropZone
(hovered)="toggleHover($event)"
(dropped)="startUpload($event)"
[class.hovering]="isHovering">
<h3>AngularFire Drop Zone</h3>
<div class="file">
<label class="file-label">
<input class="file-input" type="file" (change)="startUpload($event.target.files)">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
or choose a file…
</span>
</span>
</label>
</div>
</div>
<div *ngIf="percentage | async as pct">
<progress class="progress is-info"
[value]="pct"
max="100">
</progress>
{{ pct | number }}%
</div>
<div *ngIf="snapshot | async as snap">
{{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }}
<div *ngIf="downloadURL | async as url">
<h3>Results!</h3>
<img [src]="url"><br>
<a [href]="url" target="_blank" rel="noopener">Download Me!</a>
</div>
<button (click)="task.pause()" class="button is-warning" [disabled]="!isActive(snap)">Pause</button>
<button (click)="task.cancel()" class="button is-danger" [disabled]="!isActive(snap)">Cancel</button>
<button (click)="task.resume()" class="button is-info" [disabled]="!(snap?.state === 'paused')">Resume</button>
</div>
答案 0 :(得分：1)
我刚刚构建了这样的东西：）
我将percentChanges（）可观察对象存储在一个数组中，并在模板中循环遍历它们
<div class="tasks">
<mat-progress-bar
class="mt-2"
*ngFor="let progress$ of progressObservables"
mode="determinate"
[value]="progress$ | async"
></mat-progress-bar>
</div>
然后，我使用Promise.all函数等待所有它们并关闭对话框。 由于所有可观察对象也都是Promises，所以效果很好。
this.tasks: AngularFireUploadTask[] = ...;
this.progressObservables = this.tasks.map(t => t.percentageChanges());
Promise.all(this.tasks).then(() => this.dialogRef.close());
答案 1 :(得分：0)
到目前为止，我设法复制了以下功能：
@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.scss'],
})
export class FileUploadComponent {
tasks$: Observable<any>
progresses$: any
snapshots$: any
isHovering: boolean
constructor(
private storage: AngularFireStorage,
private db: AngularFirestore,
) {}
toggleHover(event: boolean) {
this.isHovering = event
}
startUpload(event: HTMLInputEvent) {
this.tasks$ = from([Array.from(event.target.files)]).pipe(
map(files =>
files.map(file => {
const path = `test/${new Date().getTime()}_${file.name}`
const customMetadata = { app: 'My AngularFire-powered PWA!' }
return this.storage.upload(path, file, { customMetadata })
}),
),
)
this.snapshots$ = this.tasks$.pipe(
map(files =>
files.map(file =>
file.snapshotChanges(),
),
)
)
this.progresses$ = this.tasks$.pipe(
map(files =>
files.map(file =>
file.percentageChanges()
),
)
)
}
}
file-upload.component.html
<div class="dropzone"
appDropZone
(hovered)="toggleHover($event)"
(dropped)="startUpload($event)"
[class.hovering]="isHovering">
<h3>AngularFire Drop Zone</h3>
<div class="file">
<label class="file-label">
<input class="file-input" type="file" (change)="startUpload($event)"
multiple>
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
or choose a file…
</span>
</span>
</label>
</div>
</div>
<div>
<ul>
<li *ngFor="let progress of progresses$ | async">
<progress
class="progress is-info"
[value]="progress | async"
max="100">
</progress>
{{progress | async | number }}%
</li>
</ul>
</div>
<div>
<ul>
<li *ngFor="let snap of snapshots$ | async">
<p *ngIf="snap | async">
{{ (snap | async)?.bytesTransferred | fileSize }} of
{{ (snap | async)?.totalBytes | fileSize }}
</p>
</li>
</ul>
</div>