Как загрузить изображение в Firebase Storage от Ionic?

Question

Мне нужна помощь, чтобы отправить изображение в хранилище 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 - кто получает значение this.domSanitizer.bypassSecurityTrustResourceUrl (base64File) или base64File из функции encodeFile.

Я не получаюошибка в функции загрузки, однако, я не получаю успех, у меня ничего не появляется.

Как правильно отправить изображение на сервер?

Answer 1

Я сделал это:

 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');

Answer 2

Я думаю, что вы можете захватить изображение как base64, используя:

destinationType: this.camera.DestinationType.DATA_URL

вместо FILE_URI.

В любом случае, для записи изображения я использовал следующий код с AngularFire2, который работает.this.data.image - это место, где я сохранил base64 изображения.Тем не менее, это может быть сложно, если ваш кодировщик добавляет "" data: image / jpeg; base64 "в начало строки 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

    });
  })
})