Firebase 上传多个 Storage/Firestore

Posted 2023-03-22

【中文标题】Firebase 上传多个 Storage/Firestore

【英文标题】：Firebase upload multiple Storage / Firestore

【发布时间】：2019-01-25 20:27:54

【问题描述】：

有人可以指导我同时将多张图片上传到 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 " >
        <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;

【参考方案1】：

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

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

【讨论】：

处理多个文件的部分可以参考本教程的部分内容：scotch.io/tutorials/…

谢谢，我很难理解，但我正在详细查看链接。感谢您的帮助。