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

Question

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

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

Answer 1

我不知道任何可以执行Firebase存储的Angular2库。 AngularFire2库在添加该功能时打开了一个问题 。

Answer 2

按照以下链接中的说明操作，您可以将文件从角度2上传到firebase存储。

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

您可以执行以下必要步骤。

步骤：1 =>安装npm包

$ npm install o2-upload-to-fbs --save

步骤：2 =>登录您的firebase帐户并在存储部分创建一个存储桶

步骤：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 app您将获得代码只需复制并粘贴代码并粘贴到上面的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;
  }
 }
}

希望这会帮助你。

谢谢