时间戳

首页 > 解决方案 > Angular 错误不允许我在 Firebase Storage 中更新和上传图片，原因是找不到存储桶

javascript - Angular 错误不允许我在 Firebase Storage 中更新和上传图片，原因是找不到存储桶

问题描述

美好的一天开发人员，我正在构建这个简单的应用程序，可以将图像上传到 angular 的图像库，但是我在将上传表单中获得的图像上传到 Firebase 存储时遇到问题，这给我一个错误，指的是未定义的 storageBucket，它已经在我的环境变量中声明了，在文件夹 environment.ts 和 environment.prod.ts 中，如下所示：

ENVIRONMENT FOLDERS

export const environment = {
  production: false,
  firebaseConfig : {
    apiKey: "----------------------------------------",
  authDomain: "images-gallery-abbac.firebaseapp.com",
  databaseURL: "https://images-gallery-abbac.firebaseio.com",
  projectId: "images-gallery-abbac",
  storageBucket: "images-gallery-abbac.appspot.com",
  messagingSenderId: "357163460358",
  appId: "-----------------------------------------"
  }
};

在我的方法所在的 ts 组件上，我将其作为导入、构造函数和方法执行：

IMPORTS AND CONSTRUCTORS

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AngularFireStorage } from '@angular/fire/storage';
import { finalize } from 'rxjs/operators';
@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css'],
})
export class ImageComponent implements OnInit {

  imgSrc: string = '/assets/img/default.png';
  selectedImg: any = null;
  isSubmitted: boolean;

  formTemplate = new FormGroup({
    caption: new FormControl('', Validators.required),
    category: new FormControl(''),
    imageUrl: new FormControl('', Validators.required),
  });

  constructor(private fireStorage: AngularFireStorage) {}

基本上导入所有引用 Firebase Storage ，还初始化 3 个引用用户当前选择的图像的变量，以及默认情况下的 img 和一个密切关注表单提交与否的布尔值。在构造函数中，我通过名为 fireStorage 的初始化变量调用 AngularFireStorage。

METHOD FOR UPLOADING IMAGES

   onSubmit(formValue) {

    if (this.formTemplate.valid) {
      var filePath = `${formValue.category}/${this.selectedImg.name}`;
      const fileRef = this.fireStorage.ref(filePath);
      this.fireStorage
        .upload(filePath, this.selectedImg)
        .snapshotChanges()
        .pipe(
          finalize(() => {
            fileRef.getDownloadURL().subscribe((url) => {
              formValue['imageUrl'] = url;
            });
          })
        ).subscribe();
    }
  }

因此，基本上在上传图像的形式为真的情况下，我声明了一个变量（filePath），它描述了我的存储中的路径以允许选择的图像，（还声明了第二个变量（fileRef）负责允许引用或路径其中选择的图像存储在 Firebase 的存储中）然后访问声明为在构造函数中初始化的变量的 AngularFireStorage 服务我提交方法上传（），作为参数传递我想在我的存储中建立的路径以及图像由用户选择并允许在变量 selectedImg 中，然后通过返回和 Observable 的方法 snapshotChanges ，并使用另一个方法 pipe() 我包括 finalize()，它基本上模拟了由 snapshotChanges() 抛出的 observable 执行 final此方法的流程结束时的函数，在这种情况下，通过变量 fileRef 访问方法 getDownloadUrl

一切都在表单中很好地工作，但是当我尝试提交以将图像保存在我的 Firebase 中时，这是出现的错误

在此处输入图像描述

我自己在努力学习 Angular ，因此我会很感激任何关于我应该做什么的想法。提前谢谢！！！

标签： javascriptangularfirebasegoogle-cloud-firestore

解决方案

看来您尚未初始化 Firebaseapp.module.ts并将您firebaseConfig定义的environment.ts

导入AngularFireModule并将其添加到初始化它的导入数组中。

...
import { AngularFireModule } from '@angular/fire';

@NgModule({
  declarations: [
     ...
  ],
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebaseConfig),
  ],
  providers: [
     ...
  ],
  ...
})
export class AppModule { }

希望能帮助到你。快乐编码！

推荐阅读