如何使用 angularfire2 和 angular 8 在实时 Firebase 中存储图像 - TypeScript

在本教程中，我们将学习如何使用 AngularFire2 和 Angular 8 实现 Firebase 图像存储功能。我们将使用 Firebase 实时数据库来存储这些图像，这意味着当任何一个用户上传图像时，其他用户能够实时看到这些图像。

安装 AngularFire2

要开始使用 AngularFire2，首先需要在您的项目中安装 AngularFire2 库。您可以使用以下命令安装该库：

npm install firebase angularfire2 --save

添加 Firebase 配置

现在，我们需要在我们的 Angular 8 项目中配置 Firebase。您可以在 Firebase 控制台中创建一个新项目，或使用现有项目。在 Firebase 控制台中，单击“添加 Firebase 到您的 web 应用程序”按钮来获取 Firebase 配置。将这些配置添加到您的 app.module.ts 文件中，如下所示：

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

// Replace with your configuration
const firebaseConfig = {
  // Your firebase configuration goes here
};

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

请注意，我们导入了 AngularFireModule 和 AngularFireDatabaseModule，并将它们添加到我们的模块中。

创建 Firebase 存储服务

接下来，我们将创建一个 Firebase 存储服务，以进行文件上传和下载。我们将使用 AngularFireStorage 服务来上传和下载文件。我们将在 app.module.ts 文件中创建该服务：

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

@NgModule({
  providers: [AngularFireStorage]
})
export class AppModule {}

现在，我们已经创建了 Firebase 存储的服务提供程序。我们可以在我们的组件中注入这个服务来上传和下载文件。

上传和展示图片

接下来，我们将学习如何上传和展示图像。我们将创建一个简单的 HTML 表单，允许用户上传图像。当图像被上传时，我们将在 Firebase 实时数据库中存储该图像，并在页面上展示它。

<div>
  <form (ngSubmit)="onSubmit()">
    <input type="file" (change)="onFileSelected($event)">
    <button type="submit">Upload</button>
  </form>

  <hr>

  <div *ngFor="let image of images">
    <img [src]="image.url">
  </div>
</div>

我们在 onSubmit() 方法中调用了一个方法，上传图像并在页面上展示它：

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <form (ngSubmit)="onSubmit()">
        <input type="file" (change)="onFileSelected($event)">
        <button type="submit">Upload</button>
      </form>

      <hr>

      <div *ngFor="let image of images">
        <img [src]="image.url">
      </div>
    </div>
  `
})
export class AppComponent {
  selectedFile: File;
  images: any[] = [];

  constructor(private storage: AngularFireStorage) {}

  onFileSelected(event): void {
    this.selectedFile = event.target.files[0];
  }

  onSubmit(): void {
    if (!this.selectedFile) {
      alert('No image selected');
      return;
    }

    // Generate a unique name for the image
    const imageName = Math.random().toString(36).substring(2);

    // Get the path to upload the image to
    const path = `images/${imageName}.jpg`;

    // Upload the image to Firebase storage
    const uploadTask = this.storage.upload(path, this.selectedFile);

    // Listen for the upload to complete
    uploadTask.then(snapshot => {
      // Get the image URL from Firebase storage
      snapshot.ref.getDownloadURL().then(url => {
        // Save the URL to Firebase database
        const itemRef = this.db.object('images/' + imageName);
        itemRef.set({ url: url });

        // Add the image to the images array
        this.images.push({ url: url });
      });
    });
  }
}

我们首先在 onFileSelected() 方法中获取了用户选择的文件。然后，在 onSubmit() 方法中，我们生成了一个唯一的文件名，并将其上传到 Firebase 存储。一旦上传完成，我们将获取文件的下载 URL，并将其存储到 Firebase 数据库中。最后，我们将添加该图像的 URL 到数据数组中，以展示在页面上。

结论

现在，我们已经学习了如何使用 AngularFire2 和 Angular 8 在实时 Firebase 中存储图像。我们已经了解了如何创建 Firebase 数据库和存储服务，并学习了如何上传和展示图像。现在，您可以将这些技术应用于您的实际项目中。