将图像存储在 Firebase 存储中，将数据存储在 Firestore 中答案

【问题标题】：Store images in firebase storage and data in firestore将图像存储在 Firebase 存储中，将数据存储在 Firestore 中
【发布时间】：2020-04-16 00:39:17
【问题描述】：

我正在使用 Angular 8 + Firestore（云 Firestore，不是实时数据库）

我想通过输入元素选择一张图片，然后将其上传到 Firestore 存储中。所有其他数据将存储在 Cloud Firestore 中。

如何将图像存储在存储中，并将其 url 存储在 firestore 中？

component.html

<div class="form-group">
        <input type="email" name="emailA" #emailA="ngModel" [(ngModel)]="service.formData.emailA" class="form-control" placeholder="e-mail" required>
    </div>

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" name="imgurls" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
            <label class="custom-file-label" for="inputGroupFile01" >Choose file</label>
        </div>
    </div>
    <p style="color: red;" *ngIf="form.invalid && form.touched"> *All the fields are required </p>
    <div class="form-group">
        <button type="submit" [disabled]="form.invalid" class="btn btn-block btn-primary">Submit</button>
    </div>

这是我的 component.ts

onSubmit(form: NgForm) {

    let data = Object.assign({}, form.value);
    delete data.id;

    if (form.value.id == null) {

      this.firestore.collection('lecturers').add(data);
    }
    else {
      this.firestore.doc('lecturers/' + form.value.id).update(data);
    }
    this.resetForm(form);
    this.toastr.success('Lecturer saved successfully!', 'Lecturer Details');


  }

【问题讨论】：

标签： html angular firebase google-cloud-firestore angular8

【解决方案1】：

要上传文件，请执行以下操作：

import { Component } from '@angular/core';
import { AngularFireStorage } from '@angular/fire/storage';

@Component({
  selector: 'app-root',
  template: `
  <input type="file" (change)="uploadFile($event)">
  `
})
export class AppComponent {
  constructor(private storage: AngularFireStorage) { }
  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const task = this.storage.upload(filePath, file);
  }
}

获取网址：

@Component({
  selector: 'app-root',
  template: `<img [src]="profileUrl | async" />`
})
export class AppComponent {
  profileUrl: Observable<string | null>;
  constructor(private storage: AngularFireStorage) {
     const ref = this.storage.ref('users/davideast.jpg');
     this.profileUrl = ref.getDownloadURL();
  }
}

然后您可以将url 存储在firestore 中。

查看文档：

https://github.com/angular/angularfire/blob/master/docs/storage/storage.md

【讨论】：