我按照本教程在Angular4 App中使用dropZone构建图像上传功能:Firebase Storage With AngularFire - DropZone File Uploader
单上传非常有效。但我需要一个多重上传功能。所以我把代码改成了这个:
组件
startUpload(event: FileList) {
Array.from(event).forEach(file => {
if (file.type.split('/')[0] != 'image') {
alert('Dieses Dateiformat wird nicht unterstützt');
}
// Storage path
const path = `uploads/${this.currentUserEmail}_${file.name}`;
// Meta Data
const customMetadata = {
auction: 'test'
}
// Main Task
this.task = this.storage.upload(path, file, {customMetadata});
// Progress Monitoring
this.percentage = this.task.percentageChanges();
this.snapshot = this.task.snapshotChanges();
// File Download Url
this.downloadURL = this.task.downloadURL();
})
}
前端
<div class="dropzone" dropZone (hovered)="toggleHover($event)" (dropped)="startUpload($event)" [class.hovering]="isHovering">
<h3>Upload</h3>
<p>Ziehe Deine Fotos via Drag & Drop in die rechteckige Fläche oder klick auf "Datei auswählen"</p>
<div class="file">
<input multiple="multiple" class="file-input" type="file" (change)="startUpload($event.target.files)">
</div>
<div *ngIf="percentage | async as pct">
<progress [value]="pct" max="100"></progress>
</div>
<div *ngIf="(snapshot | async) as snap">
{{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }}
</div>
</div>
<ul class="list-group">
<div *ngIf="downloadURL | async">
<h3>Results</h3>
<li class="list-group-item">
<img [src]="u" alt="Bild" height="100">
</li>
</div>
</ul>
函数startUpload
在存储中正确地写入所有图像,但在前端我不知道为所有图像显示分离的进度条或正确上传的图像的分离结果。它仅显示有关最后一张图像的信息。
如何编写代码以显示不同图像的多个进度条?例如
我尝试了什么
这样想:
<div *ngFor="let pct of percentage | async">
<progress [value]="pct" max="100"></progress>
</div>
....但没有成功......任何想法?
答案 0 :(得分:0)
您可以创建所有已删除文件的数组,如下所示:
startUpload(event: FileList) {
Array.from(event).forEach(file => {
if (file.type.split('/')[0] != 'image') {
alert('Dieses Dateiformat wird nicht unterstützt');
}
const path = `uploads/${this.currentUserEmail}_${file.name}`;
const customMetadata = {
auction: 'test'
}
const task = this.storage.upload(path, file, {customMetadata});
const percentage = this.task.percentageChanges();
const snapshot = this.task.snapshotChanges();
const fileRef = this.storage.ref(path);
const downloadURL = this.task.getDownloadURL();
this.files.push({
task: task,
percentage: percentage,
snapshot: snapshot,
filename: filename,
downloadURL: downloadURL
});
})
}
然后像这样在前端迭代它
<div *ngFor="let file of files">
{{ file.filename }}
<div *ngIf="file.percentage | async as pct">
<progress class="progress is-info"
[value]="pct"
max="100">
</progress>
{{ pct | number }}%
</div>
<div *ngIf="(file.snapshot | async) as snap">
{{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }}
</div>
</div>