web-dev-qa-db-ja.com

Ionic 4で画像をfirebaseにアップロードする方法は？

Firebaseに画像をアップロードできません。任意の助けいただければ幸いです。

Ionic 4.0で画像をfirebaseにアップロードする方法を知っている人はいますか？以下はIonic 2で機能するために使用するコードですが、画像をfirebaseにアップロードするボタン（クリック）に応答するまでに約30秒かかり、画像がfirebaseにアップロードされることはありません。

このチュートリアルの例を使用してみましたが、ImagePickerに関連するエラーを取り除くことができません。 https://ionicthemes.com/tutorials/about/ionic-firebase-image-upload 助けていただければ幸いです。

      <ion-card-content>
            <div>
                <img src="assets/img/add-an-image.png" (click)="selectPhoto()"/>     
            </div>
        </ion-card-content>
constructor(
    private afAuth: AngularFireAuth,
    private camera: Camera) {

        this.afAuth.authState.subscribe(user => {
        this.userId = user.uid;
        this.myPhotosRef = firebase.storage().ref(`/Photos/${ this.userId }/`);
      });
    }

  selectPhoto(): void {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    };

    this.camera.getPicture(options).then((imageData) => {
      console.log(options, 'get pic');
      this.myPhoto = imageData;
      this.uploadPhoto(this.myPhoto);
    }, error => {
      console.log('ERROR -> ' + JSON.stringify(error));
    });
  }

  private uploadPhoto(photoName: string): void {
    this.myPhotosRef.child(photoName)
      .putString(this.myPhoto, 'base64', { contentType: 'image/png' })
      .then((savedPicture) => {
        this.myPhotoURL = savedPicture.downloadURL;
      });
  }
angularfirebaseionic4
4
D.Hodges

次のチュートリアルを使用して、Firebaseに画像を正常にアップロードできました。

https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step

0
D.Hodges

Ionic画像をFirebase Storageにアップロードするためのテーマ： https://ionicthemes.com/tutorials/about/ionic-firebase-image-upload からこのチュートリアルに従いました

Ionic 3の場合ですが、Ionic 4.でも機能します。

チュートリアルによると、ストレージはfirestoreおよびfire storageモジュールから分離されているため、アプリモジュールで次のようにfirebaseをインポートする必要があります。

import * as firebase from "firebase";
firebase.initializeApp(environment.firebaseConfig)
0
Carrie M.