如何使用 AngularFire2 和 Firebase 存储上传文件数组？
How to upload array of files using AngularFire2 and Firebase Storage?
我一直在努力寻找这个问题的答案。大多数示例，包括 AngularFire2 文档和来自 angularfirebase.com 的精彩教程，都只专注于一次上传一个文件。我想建立一个照片库 cms，这样至少可以说该选项效率低下...
对于我最初的问题，我从 Leon Radley 那里得到了一个答案，感谢他，它帮助我重新思考了这种方法。
然而，这个解决方案对我来说并不是最优的。我决定回答我自己的问题，这样它可能会对某人有所帮助，或者更好的是，有人会提出更好的解决方案。
随着我想出更多功能，我将更新我的答案。我只是重写 angularfirebase.com 提供的解决方案以使用一组文件。
注意这里使用了 Custom Drop Event 和 FileList Directive，更多细节请参考源码
原解：
文件-upload.component.ts
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
}
}
文件-upload.component.html
<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>
我刚刚构建了这样的东西:)
我将 percentageChanges() observables 存储在一个数组中并在模板中循环遍历它们
<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函数等待所有这些并关闭对话框。
由于所有 Observables 也是 Promises，因此效果很好。
this.tasks: AngularFireUploadTask[] = ...;
this.progressObservables = this.tasks.map(t => t.percentageChanges());
Promise.all(this.tasks).then(() => this.dialogRef.close());
到目前为止，我成功复制了以下功能：
- 上传
- 快照（传输的字节数/总字节数）
- 进步
文件-upload.component.ts
@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()
),
)
)
}
}
文件-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>
我一直在努力寻找这个问题的答案。大多数示例，包括 AngularFire2 文档和来自 angularfirebase.com 的精彩教程，都只专注于一次上传一个文件。我想建立一个照片库 cms，这样至少可以说该选项效率低下...
对于我最初的问题，我从 Leon Radley 那里得到了一个答案，感谢他，它帮助我重新思考了这种方法。
然而，这个解决方案对我来说并不是最优的。我决定回答我自己的问题，这样它可能会对某人有所帮助，或者更好的是，有人会提出更好的解决方案。
随着我想出更多功能，我将更新我的答案。我只是重写 angularfirebase.com 提供的解决方案以使用一组文件。
注意这里使用了 Custom Drop Event 和 FileList Directive，更多细节请参考源码
原解：
文件-upload.component.ts
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
}
}
文件-upload.component.html
<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>
我刚刚构建了这样的东西:)
我将 percentageChanges() observables 存储在一个数组中并在模板中循环遍历它们
<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函数等待所有这些并关闭对话框。 由于所有 Observables 也是 Promises，因此效果很好。
this.tasks: AngularFireUploadTask[] = ...;
this.progressObservables = this.tasks.map(t => t.percentageChanges());
Promise.all(this.tasks).then(() => this.dialogRef.close());
到目前为止，我成功复制了以下功能：
- 上传
- 快照（传输的字节数/总字节数）
- 进步
文件-upload.component.ts
@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()
),
)
)
}
}
文件-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>