Firebase 上传多个 Storage/Firestore

Question

有人可以指导我同时将多张图片上传到 Firebase 吗？

我想要做的是将几张图片上传到 Firebase 存储并将每个引用保存在 Firestore 中（例如，在一个数组中）。我设法做到了，但只有一张图片。我正在使用 Angularfire 存储。

如果您想详细了解，请点击此处：https://stackblitz.com/edit/upload-multiple-firebase

此时的方面如下：

在 Storage 中，它看起来像这样（请注意，图像位于具有相同 Firestore ID 的文件夹中）：

在 Firestore 中它看起来像这样（注意 ID 与 Storage 中的相同）：

这是我的代码：

component.ts

import { Component, OnInit, ViewChild  } from '@angular/core';
import { finalize } from 'rxjs/operators';
import { AngularFireStorage } from 'angularfire2/storage';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FirebaseService } from './services/firebase.service';

export interface Test {
  imagenDestacada: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

uploadPercent: Observable<number>;
downloadURL: Observable<string>;
selectedFile: FileList | null;
forma: FormGroup;
tests: Observable<any[]>;

constructor(fb: FormBuilder, private storage: AngularFireStorage, private afs: AngularFirestore, private fs: FirebaseService ) { 
this.forma = fb.group ({
  categoria: ['myCategoria'],

})
}
ngOnInit() {
  this.mostrarImagenes();
}

detectFiles(event) {
  this.selectedFile = event.target.files[0];
}

uploadFile() {
  const myTest = this.afs.collection('test').ref.doc();
  console.log(myTest.id)

  const file = this.selectedFile
  const filePath = `${myTest.id}/name1`;
  const fileRef = this.storage.ref(filePath);
  const task = this.storage.upload(filePath, file);

  this.uploadPercent = task.percentageChanges();  

  task.snapshotChanges().pipe(
    finalize(() => {
      fileRef.getDownloadURL().toPromise().then( (url) => {
        this.downloadURL = url;

        myTest.set({
          categoria: this.forma.value.categoria,
          imagenes : this.downloadURL,
          myId : myTest.id
        })

        console.log( this.downloadURL ) 
      }).catch(err=> { console.log(err) });
    })    
  )
  .subscribe()
}

mostrarImagenes() {
  this.tests = this.fs.getTests();
}

}

component.html

<div class="container py-4">

  <input type="file" multiple (change)="detectFiles($event)">
  <button (click)="uploadFile()" class="btn btn-primary">UPLOAD</button>
  <div>{{ uploadPercent | async }}</div>
  <a [href]="downloadURL">{{ downloadURL }}</a>

  <hr>
  <div class="row">
    <div class="col-lg-2 col-6" *ngFor="let test of tests | async">
      <div class="card">
        <img class="card-img-top" src="{{ test.imagenes }}" width="100%">
        <div class="card-body">
        <p class="card-text">My text</p>
      </div>
    </div>
  </div>
</div>

</div>

service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';

@Injectable()
export class FirebaseService {

tests: Observable<any[]>;

constructor( private afs: AngularFirestore ) { }

getTests() {
  this.tests = this.afs.collection('test').valueChanges();
  return this.tests;
}

}

Answer 1

因为您的 detectFiles 仅设置为检测 1 个文件。

1. 将其更改为处理所有选定的文件，而不是仅处理 file[0]。
2. 将 selectedFile 改为 selectedFileList 数组。
3. 更改uploadFile 逻辑以循环遍历selectedFileList 并上传。