firebase 上传并使用 ionic 2 获取照片

Question

我正在尝试在我的 Ionic 2 应用中上传一张获取照片。我成功运行相机并将照片保存在 Firebase 中，但没有在我的应用程序上获取和显示它。我不确定我做对了，保存在 Firebase 中。

我把我的代码放在这里。

add-note.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera } from 'ionic-native';


import {NotesData} from "../../providers/notes-data";

/*
  Generated class for the AddNote page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-add-note',
  templateUrl: 'add-note.html'
})
export class AddNote {
  public notePicture: any;



  constructor(public navCtrl: NavController,public notesData:NotesData) {}

  ionViewDidLoad() {
  }
  addNote() {
    this.notesData.addPhoto(this.notePicture);

    this.navCtrl.pop();
  }

  takePicture(){
    Camera.getPicture({
      quality : 95,
      destinationType : Camera.DestinationType.DATA_URL,
      sourceType : Camera.PictureSourceType.CAMERA,
      allowEdit : true,
      encodingType: Camera.EncodingType.PNG,
      targetWidth: 500,
      targetHeight: 500,
      saveToPhotoAlbum: true
    }).then(imageData => {
      this.notePicture = imageData;
    }, error => {
      console.log("ERROR -> " + JSON.stringify(error));
    });
  }


}

note-data.ts //笔记提供者将照片上传到firebase

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import firebase from 'firebase'
/*
 Generated class for the NotesData provider.

 See https://angular.io/docs/ts/latest/guide/dependency-injection.html
 for more info on providers and Angular 2 DI.
 */
@Injectable()
export class NotesData {
  //user data
  public currentUser: any;
  public profilePictureRef: any;
  //notedata
  public notesList: any;

  //firebase data
  public photoRef:any;


  constructor() {
    this.currentUser = firebase.auth().currentUser.uid;
    this.fireRef=firebase.database().ref();
    this.photoRef=firebase.database().ref('users/'+this.currentUser+'/photos');
    this.notesList = 
  }

  addPhoto(notePicture:any){
    this.photoRef.push({id:"data:image/jpeg;base64,"+notePicture});

  }


}

我的火力基地结构照片

Answer 1

你可以使用angular-firebase npm package，简单好用

npm install angular-firebase

您可以简单地上传捕获的 base 64 图像 使用此代码

this.firebase.uploadString(encodedFile,'images/1.jpg','base64',
(v)=>{
    console.log('Upload progress :'v + '% uploaded');   
    // event detect the data uploaded  used to monitor the persentage of the download process
    // this will return 'Upload progress : 24% uploaded'
// for example 
}).then((url)=>{
    console.log(url);
    //the URL of uploaded file or image
});

Answer 2

不要保存整个 url，只保存短路径。正如您可以在my blog post about uploading, and getting data from firebase storage 找到的那样，只需 2 行代码即可获取具有权限的实际 url。

                this.storageRef = firebase.storage().ref().child('images/image.png');
                this.storageRef.getDownloadURL().then(url =>
                    console.log(url)
                );

Answer 3

您想使用 Firebase 存储并将网址存储在您的 Firebase 中。通过将图像数据存储在实时数据库中，您将花费大量额外的金钱和麻烦。

新的 SDK 具有出色的 API，可用于上传可公开访问的图像。