angular - 如何在 Ionic 4 中将图片上传到 firebase?

标签 angular firebase ionic4

我无法将图像上传到 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;
      });
  }

最佳答案

关于angular - 如何在 Ionic 4 中将图片上传到 firebase?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55130046/

相关文章:

java - 如何在 Firebase 中实时存储位置?

ember.js - 如何在 firebase auth 中设置角色?

javascript - 从 Ionic 4 警报中的输入中获取值

angular - 如何在简单的单选垫选择中使用 cdkVirtualScroll

css - ngStyle 被应用了多少次

html - 如何减小Ionic2中文本输入的大小并在右侧对齐标签

html - 如何根据 ionic 应用程序构建类型在 css 中应用 if else?

html - 具有可调多列的 Angular 下拉

swift - 使用 swift4 在 xcode 中对单个项目使用不同的 GoogleService-Info.plist

angular - 无法绑定(bind)到 'countUp',因为它不是 'h1' 的已知属性。 countup.js-angular2