Typescript Firebase上载多个存储/Firestore

有人能指导我同时上传多张图片到Firebase吗

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

如果您想详细了解，这里有一个stackblitz：

目前情况如下：

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

在Firestore中，它如下所示（请注意，ID与存储中的ID相同）：

这是我的代码：

组件。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();
}

}

从'@angular/core'导入{Component，OnInit，ViewChild}；
从“rxjs/operators”导入{finalize}；
从“angularfire2/storage”导入{AngularFireStorage}；
从“angularfire2/firestore”导入{AngularFirestore}；
从“rxjs”导入{Observable}；
从'@angular/forms'导入{FormGroup，FormBuilder，Validators}；
从“./services/firebase.service”导入{FirebaseService}；
导出接口测试{
Imagendestada：字符串；
}
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
上传百分比：可见；
下载URL：可观察；
selectedFile:FileList |空；
forma：FormGroup；
测试：可观察

我的文本

服务台

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;
}

}

从'@angular/core'导入{Injectable}；
从“angularfire2/firestore”导入{AngularFirestore}；
从“rxjs”导入{Observable}；
@可注射（）
导出类FirebaseService{
测试：可观察；
构造函数（专用afs:AngularFirestore）{}
getTests（）{
this.tests=this.afs.collection（'test'）.valueChanges（）；
返回此文件。测试；
}
}

因为您的

检测文件

仅设置为检测1个文件

将其更改为仅处理所有选定文件，而不是

文件[0]

将

selectedFile

改为

selectedFileList

数组

将

uploadFile

逻辑更改为循环通过

selectedFileList

并上载

---

关于处理多个文件的部分，您可以参考本教程的部分内容：谢谢，我很难理解，但我正在详细查看链接。谢谢您的帮助。

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;
}

}