Загрузка файлов Firebase, изображений через базу данных Firebase (хранилище Firebase) с использованием Angular2

Я ищу пример загрузки файла изображения в базу данных Firebase с использованием Angular2.

Пожалуйста, предоставьте образец кода или любую ссылку.


person Ankit Maheshwari    schedule 07.08.2016    source источник


Ответы (2)


Я не знаю ни одной библиотеки Angular2, которая может работать с Firebase Storage. В библиотеке AngularFire2 есть выпуск открыть при добавлении функции.

person Morgan O'Neal    schedule 08.08.2016

Следуйте инструкциям по следующей ссылке, и вы сможете загрузить файл из angular 2 в хранилище firebase.

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

Вот следующие необходимые шаги, которые вы можете сделать.

Шаг: 1 => Установите пакет npm

$ npm установить 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 для веб-приложения, вы получите код, просто скопируйте и вставьте код и вставьте в объект 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;
  }
 }
}

Надеюсь, что это поможет вам.

Спасибо

person Sohail Mushtaq Awan    schedule 10.04.2017