使用Angular2在Firebase数据库（Firebase存储）上传文件和图像

Question

我正在寻找一个使用Angular2上传图像文件到Firebase数据库的示例。

请提供代码示例或任何链接。

- Ankit Maheshwari

Answer 1

我不知道有任何Angular2库可以处理Firebase存储。AngularFire2库已经开放了一个问题，添加该功能。

- Morgan O'Neal

Answer 2

请按照以下链接中的说明，您可以将文件从Angular 2上传到Firebase存储。

https://github.com/Ohtsu/o2-upload-to-fbs

以下是你可以执行的必要步骤。

步骤1 => 安装npm包 $ npm install o2-upload-to-fbs --save 步骤2 => 登录到你的firebase账户并在存储部分创建一个bucket

步骤3 => 现在，在你的app.module.ts文件中添加以下代码

import { AngularFireModule } from 'angularfire2';       
import { O2UploadToFbsComponent } from 'o2-upload-to-fbs';  

export const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxxxxxxxx.firebaseio.com",
  storageBucket: "xxxxxxxxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxxxxxxxx"

};

@NgModule({
 declarations: [
 O2UploadToFbsComponent,  // <= Add
 AppComponent
],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  AngularFireModule.initializeApp(firebaseConfig)  // <= Add

],
  providers: [],
  bootstrap: [AppComponent]
})

从您的Firebase帐户中，单击概述链接，然后单击Firebase for Web应用程序，您将获得代码，只需复制并粘贴该代码，并将其粘贴到firebaseConfig对象上方

步骤4：=> 将以下内容添加到您的组件HTML中

<o2-upload-to-fbs [fbsBasePath] = "'images/'" [btnSelectText] = "'Browse'"></o2-upload-to-fbs>

步骤5 => 最后在Firebase存储规则中替换以下代码

service firebase.storage {
 match /b/your_project_name.appspot.com/o {
   match /images/{allPaths=**} {
   allow read, write;
  }
 }
}

希望这能对你有所帮助。

谢谢。

- Sohail Mushtaq Awan