Firebase Upload-Dateien, Bilder über Firebase-Datenbank (Firebase-Speicher) mit Angular2

Question

Kann jemand mit dem Beispiel für den Upload von Bilddateien über Firebase-Datenbank mit Angular2 helfen.

Bitte geben Sie Codebeispiel oder einen Link ..

Dank!

Answer 1

Mir sind keine Angular2-Bibliotheken bekannt, die Firebase Storage ausführen können. Die AngularFire2 Bibliothek verfügt über eine issue offene Funktion.

Answer 2

Folgen Sie den Anweisungen auf dem folgenden Link, und Sie können Datei von eckigen 2 in Firebase-Speicher hochladen.

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

Hier sind die folgenden notwendigen Schritte Sie tun können.

Schritt: 1 => Installieren npm Paket

$ npm installieren o2-Upload-to-fbs --save

Schritt: 2 => Login auf Ihr Konto und Feuerbasis erstellen Eimer in dem Speicherabschnitt

Schritt: 3 => Jetzt in Ihrer app.module.ts Datei, fügen Sie den folgenden Code

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] 
}) 

und von Ihrem Feuerbasis Konto Link klicken Übersicht und dann Feuerbasis klicken für Web-Anwendung, die Sie Code bekommen kopieren und nur den Code und fügen Sie ihn in firebaseConfig Objekt oben

Schritt 4: => die folgenden Ihrer Komponente html hinzufügen

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

Schritt: 5 => Schließlich in der Feuerbasis Speicher Regel ersetzen Sie den folgenden Code

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

Hope this Ihnen helfen.

Dank