如何从 Ionic 将图像上传到 Firebase 存储？答案

【问题标题】：How upload image to firebase storage from Ionic?如何从 Ionic 将图像上传到 Firebase 存储？
【发布时间】：2018-10-10 23:58:53
【问题描述】：

我需要帮助才能将图像从 ionic 发送到 Firebase 存储。所以，我用这个功能拍照：

  async takePicture() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    try {
      let imageURI = await this.camera.getPicture(options);
      let newImageURI = await this.cropImage(imageURI);
      let imageSanitized = await this.encodeFile(newImageURI);
      this.imgSrc = imageSanitized;
    } catch (e) {
      console.error(JSON.stringify(e));
    }
  }

我用这个函数裁剪：

  cropImage(imgURI): Promise<string> {
    return new Promise((resolve,reject) => {
      this.cropService.crop(imgURI, { quality: 100 }).then((newImageURI: string) => {
        resolve(newImageURI);
      }, (err) => {
        reject(err);
      })
    })
  }

用这个函数完成我的编码：

 encodeFile(ImageURI: string): Promise<any>{
    return new Promise((resolve, reject) => {
      this.base64.encodeFile(ImageURI).then((base64File: string) => {
        this.imgUri = base64File;
        resolve(this.domSanitizer.bypassSecurityTrustResourceUrl(base64File));
      }, (err) => {
        reject(err);
      })
    })
  }

this.imgSrc 是我的净化图像，它在我的 file.html 中显示得非常好。但是，我需要将此图像发送到 Firebase 存储。为此，我创建了这个函数：

uploadToStorage(imgString) {
    console.log(imgString);
    this.storage.child('exemplo.JPEG').putString(imgString, 'data_url').then((res) => {
      console.log(res);
    }, (error) => {
      console.error(error);

    });
  }

imgString 是谁从函数 encodeFile 中获取 this.domSanitizer.bypassSecurityTrustResourceUrl(base64File) 或 base64File 的值。

我的上传功能没有出错，但是，我没有成功，什么都没有显示。

如何将图像正确发送到服务器？

【问题讨论】：

标签： javascript firebase ionic3 firebase-storage

【解决方案1】：

我认为您可以使用以下方法将图像捕获为 base64：

destinationType: this.camera.DestinationType.DATA_URL

而不是 FILE_URI。

无论如何，为了记录图像，我使用了以下代码和 AngularFire2，它可以工作。 this.data.image 是我保存 base64 图像的地方。但是，如果您的编码器在 base64 字符串的开头添加“”data:image/jpeg;base64”，则可能会变得棘手。如果此代码无法按预期工作，您可以尝试添加或不添加添加的字符串。

import { AngularFireStorage, AngularFireStorageReference } from 'angularfire2/storage/public_api';

//...

const storageRef: AngularFireStorageReference = this.afStorage.ref(`images/${this.userId}/profilePic/`);

storageRef.putString(this.data.image, 'data_url', {
contentType: 'image/jpeg'
}).then(() => {

storageRef.getDownloadURL().subscribe(url => {

console.log('download url: ' + url);
//function to save download URL of saved image in database

    });
  })
})

【讨论】：

我不能使用 this.camera.DestinationType.DATA_URL 因为我需要从'@ionic-native/crop' 的 import { Crop} 到cropImage() 的 file_uri。非常感谢您的回答。

【解决方案2】：

我这样做了：

 encodeFile(ImageURI: string): Promise<any>{
    return new Promise((resolve, reject) => {
      this.base64.encodeFile(ImageURI).then((base64File: string) => {
        this.imgUri = base64File;
        ...
      }, (err) => {
        ...
      })
    })
  }

this.imgUri 存储我的图像 base64 编码。但是有必要修改它的开头。所以拆分：

let messageSplit = this.imgUri.split('data:image/*;charset=utf-8;base64,')[1];

添加到她的位置

let message64 = 'data:image/jpg;base64,' + messageSplit;

所以上传到 Firebase 存储。

const filePath = `my-pet-crocodile_${ new Date().getTime() }.jpg`;
let task = this.afStorage.ref(filePath).putString(message64, 'data_url');

【讨论】：