Question

任何人都可以使用Angular2帮助使用firebase数据库上传图像文件的示例。

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

谢谢！

Answer 1

我不知道任何可以执行Firebase存储的Angular2库。 AngularFire2库已打开issue添加了该功能。

Answer 2

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

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

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

步骤：1 =＆gt;安装npm包

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

步骤：2 =＆gt;登录您的firebase帐户并在存储部分

中创建一个存储桶

步骤：3 =＆gt;现在在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：=＆gt;将以下内容添加到组件html

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

步骤：5 =＆gt;最后在firebase存储规则中替换以下代码

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

希望这会对你有所帮助。

由于

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

2 个答案: