Как установить формат изображения для загрузки в хранилище Firebase (Ionic 3) - PullRequest
1 голос
/ 20 апреля 2019

Я использую ввод html для выбора изображения и отдельную кнопку для загрузки:

<input class="file-upload-button" (change)="changedPhoto($event)" #inputcamera type="file" accept="image/*" capture="camera" />

<button ion-button color="primary" (click)="uploadPicture()">
   Upload
</button>

Вот моя машинопись, чтобы установить this.imageSource и передать провайдеру:

  ionViewDidLoad() {
    const element = this.cameraInput.nativeElement as HTMLInputElement;
    element.onchange = () => {
      const reader = new FileReader();
      reader.onload = (r: any) => {
        //THIS IS THE ORIGINAL BASE64 STRING AS SNAPPED FROM THE CAMERA
        let base64 = r.target.result as string;
        //FIXING ORIENTATION USING NPM PLUGIN fix-orientation
        fixOrientation(base64, { image: true }, (fixed: string, image: any) => {
          //fixed IS THE NEW VERSION FOR DISPLAY PURPOSES
          this.img = fixed;
        });
      };
      reader.readAsDataURL(element.files[0]);
    };
  }

  changedPhoto(event) {
    this.imageSource = event.target.files[0];
  }

  uploadPicture() {
    this.publishedProvider.addPWAPicture(data.imageName, this.itemId, this.itemName, this.imageSource, this.userProfile.id).then(() => {
      this.imageName = '';
      this.imageSource = null;
  });

Наконец, мой провайдер берет this.imageSource и загружает в хранилище Firebase:

  addPWAPicture(imageName, ItemId, itemName, imageSource, uploaderId): firebase.Promise<any> {
    let TimeStamp = new Date();
    this.items.child('/ItemList').child(ItemId)
    .child('ImageList').push({
      imageName: imageName,
      timestamp: TimeStamp
    })
    .then((newImage) => {
      if (imageSource != null) {
        firebase.storage().ref('/itemPicture/').child(newImage.key)
        .child('imageSource.jpg').putString(imageSource, 'base64', {contentType: 'image/jpeg'})      
      }
    });
  }

Мой вопрос:

Выбор изображения с помощью камеры Cordova загружается в Firebase без ошибок, но с использованием ввода HTML,Я могу правильно просмотреть изображение, но при загрузке в firebase я получаю следующую ошибку.Почему ему не нравится вывод из программы чтения файлов?

ERROR Error: Uncaught (in promise): [object Object]

1 Ответ

0 голосов
/ 24 апреля 2019

Исправил эту проблему сам - просто используйте .put () вместо .putString (), поскольку средство чтения файлов выводит blob, а не base64!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...