Как мне внедрить мою фотографию в базу данных Firebase в реальном времени? - PullRequest
Новая
       22

Как мне внедрить мою фотографию в базу данных Firebase в реальном времени?

0 голосов
/ 03 сентября 2018

Я только что узнал, как сделать фотографию через Ionic Native SDK и загрузить ее на

Как я могу отобразить фотографию для отдельного события? По сути, я должен получить отображаемое изображение примерно так: (Обратите внимание, что оно имеет соответствующий заголовок.)

enter image description here

Прямо сейчас я могу добавить название, описание, место и категорию события. Я должен быть в состоянии нажать на изображение одновременно с ними.

Мой код: 

import { Component } from '@angular/core';
import { IonicPage, NavController, ToastController, NavParams } from 'ionic-angular';

import { Events } from '../../models/events.interface';

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

import { ImagePicker } from '@ionic-native/image-picker';
import { storage } from 'firebase';
import { Camera, CameraOptions } from '@ionic-native/camera';

@IonicPage()
@Component({
  selector: 'page-add-event',
  templateUrl: 'add-event.html',
})
export class AddEventPage {

  event = {} as Events;

  eventRef$: AngularFireList<Events>; 

  constructor(private camera: Camera, public imagePicker: ImagePicker, public toastCtrl: ToastController, public navCtrl: NavController, public navParams: NavParams, private db: AngularFireDatabase) {
    this.eventRef$ = this.db.list('events');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddEventPage');
  }

  addEvent (event: Events) {
    this.eventRef$.push({
      eventTitle: this.event.eventTitle,
      eventDescription: this.event.eventDescription,
      location: this.event.location,
      category: this.event.category
    });
    // this.navCtrl.push(HomePage);
  }

  async takePhoto() {
    try { 
      //Defining camera options
    const options: CameraOptions = {
      quality: 50,
      targetHeight: 600,
      targetWidth: 600,
      correctOrientation: true,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    const result = await this.camera.getPicture(options);
    
    const image = 'data:image/jpeg;base64,'+result;

    const pictures = storage().ref('pictures');
    pictures.putString(image, 'data_url')
    }

    catch(e){
      console.error(e);
    }
  
  }
  
}
<ion-content padding>

  <ion-icon class="planet" name="globe"></ion-icon>

  <h1>Create an Event</h1>
  <p>Let's bring our community together</p>

  <div class="list">

  <ion-item>
    <ion-label color="secondary" stacked>Event Title</ion-label>
    <ion-input type="text" [(ngModel)]="event.eventTitle"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="secondary" stacked>Event Description</ion-label>
    <ion-input type="text" [(ngModel)]="event.eventDescription"></ion-input>
  </ion-item>

  <ion-item>
      <ion-label color="secondary" stacked placeholder="City, State">Location</ion-label>
      <ion-input type="text" [(ngModel)]="event.location"></ion-input>
  </ion-item>

  <ion-item>
      <ion-label color="secondary" stacked>Category</ion-label>
      <ion-select interface = "popover" [(ngModel)]="event.category">
        <ion-option value="Environmental">Environmental</ion-option>
        <ion-option value="Education">Education</ion-option>
        <ion-option value="Other">Other</ion-option>
      </ion-select>
  </ion-item>

  <ion-item>
    <button ion-button (click)="takePhoto()">Take Photo</button>
  </ion-item>

</div>

<div class="bttn">
<button ion-button (click)="addEvent(event)">Create Event</button>
</div>

</ion-content>

Страница, на которой я отображаю события, использует этот код: 

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Profile } from '../../models/profile.interface';
import { Events } from '../../models/events.interface';

import { AngularFireDatabase } from 'angularfire2/database';

import { Observable } from 'rxjs';

import { AngularFireAuth } from 'angularfire2/auth';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  profileData: Observable<Profile>;

  event = {} as Events;
  eventsData: Observable<Events[]>;

  constructor(public navCtrl: NavController, private afAuth: AngularFireAuth, private db: AngularFireDatabase) {
    this.eventsData = this.db.list('events').valueChanges();
  }

  ionViewWillLoad(){
    this.afAuth.authState.subscribe(data => {
      if (data && data.email && data.uid) {
        this.profileData = this.db.object('profile/'+data.uid).valueChanges();
      } else {

      }
    })
  }

}
<ion-content no-bounce padding>
<div class="header"><h1>Events</h1></div>

<div class="title"><p>Nearby</p></div>

<div class="events">
    <ion-list>
        <ion-item>
            <ion-card *ngFor = "let event of eventsData | async">
            <p>{{event?.eventTitle}}</p>
            <p>{{event?.eventDescription}}</p>
            <p>{{event?.location}}</p>
            <p>{{event?.category}}</p>
            </ion-card>            
        </ion-item>
    </ion-list>
</div>
</ion-content>

Как я могу отобразить конкретное изображение для конкретного события?

Спасибо !!

1 Ответ

0 голосов
/ 03 сентября 2018

Ionic В основном использует угловой, так что если вы выполняете поиск для загрузки фотографий в угловую базу, есть много ссылок.

Вы НЕ сохраняете изображение в базе данных Firebase, вы только ссылаетесь на URL изображения в базе данных, файл хранится в облачном хранилище Google, доступ к которой можно получить через облако Google или через хранилище Firebase.

есть. https://angularfirebase.com/lessons/angular-file-uploads-to-firebase-storage/

...