Question

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

我把我的代码放在这里。

附加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});

  }


}

我的firebase结构照片

Answer 1

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

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

Answer 2

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

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

Answer 3

您可以使用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
});

firebase upload＆amp;用离子2得到照片

3 个答案: