上传图片 Firebase Ionic 3答案

【问题标题】：Upload Image Firebase Ionic 3上传图片 Firebase Ionic 3
【发布时间】：2018-07-11 22:28:10
【问题描述】：

我想用 ionic 将图像保存在 Storage 和数据库 Firebase 中，但我不保存在此页面中我得到图像数据我有 takePicure 获取图像和 uploadInformation 将数据发送到服务帮助某人我的代码如下 takeImage.ts

    takePicture() {
    this.photo = '';
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      allowEdit: true,
      // correctOrientation: false,
      targetWidth: 1000,
      targetHeight: 1000
    }
    this.camera.getPicture(options)
              .then((imageDate) => {
                let base64image = 'data:image/jpeg;base64,' + imageDate;
                this.photo = base64image;
                // this.userService.uploadToStorage(this.user.user_id, this.photo, 'citizens')
                this.uploadInformation(this.photo);
                console.log(this.photo)
              }, (error) => {
                console.log(error)
              })
              .catch((error) => {
                console.log(error)
              })
  }

    uploadInformation(info) {
     let upload = this.userService.uploadToStorage(info);
     upload.then().then(res => {
       this.userService.storeInfoToDatabase(this.user.key, res.metadata)
         .then(() => {
           alert('Inserido com sucesso so colocar o toast depois')
         })
     })
   }

现在在我的服务中，我有这段代码，并且 storeInfoToDatabase 方法收到了 2 个参数 user.key 和图像名称服务.ts

    uploadToStorage(information: any): AngularFireUploadTask { 
    let newName = information + '.png'; 
    return this.afs.ref(`users/citizens/${newName}`).putString(information, 'base64');
  }

  storeInfoToDatabase(user_id, metainfo) {
    let toSAve = { 
      url: metainfo.downloadURLs[0],
      fullPath: metainfo.fullPath,
      contentType: metainfo.contentType,
    } 
    return this.db.list(`${this.PATH}/citizens`).update(user_id, (toSAve))
  }

帮助我如何在 Firestora 和数据库中保存...？

【问题讨论】：

标签： javascript firebase ionic3 firebase-storage

【解决方案1】：

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

npm install angular-firebase

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

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

【讨论】：