更新当前用户-Angular 5 + Firebase-使用downloadURL时出错

时间:2018-11-06 07:12:11

标签: angular firebase angular5

我正在尝试更新当前用户的个人资料图片,但出现以下错误: enter image description here

我遵循了Firebase的指南,所以我真的不知道发生了什么。我拥有的代码如下。首先,只说所有代码都在工作,将图像存储在数据库中,然后获得指向它的链接。问题是我无法使用Firebase为我提供的URL检查图像this.task.downloadURL(),但是如果我使用外部的URL(无论是google的哪种URL)都可以。我如何使用Firebase提供的URL?

HTML

<div class="form-group">
  <input style="display: none" type="file" accept=".png,.jpg" (change)="upload($event)" #fileInput />
  <img src="../../../assets/images/user.jpg" class="pointer" (click)="fileInput.click()">
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" [style.width]="(uploadProgress | async) + '%'"
      [attr.aria-valuenow]="(uploadProgress | async)" asia-valuemin="0" aria-valuemax="100">
    </div>
  </div>
  <br><br>
</div>

打字稿

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import {
  AngularFireStorage,
  AngularFireStorageReference,
  AngularFireUploadTask
} from "angularfire2/storage";
import { AuthService } from "../../services/auth.service";
import { Observable } from "rxjs/Observable";
import * as firebase from "firebase/app";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"]
})
export class ProfileComponent implements OnInit {
  constructor(
    public authService: AuthService,
    private router: Router,
    private afStorage: AngularFireStorage
  ) {}

  ngOnInit() {
    this.loggedUserInfo();
  }

  //Upload new picture
  ref: AngularFireStorageReference;
  task: AngularFireUploadTask;
  uploadProgress: Observable<number>;
  downloadURL: Observable<string>;
  //Information User
  public auxAuth;

  //Upload a new picture to the database as a profile picture
  //and update it
  upload(event) {
    //Upload
    const id = this.auxAuth.uid + "_updatedPhoto";
    this.ref = this.afStorage.ref(id);
    this.task = this.ref.put(event.target.files[0]);
    this.uploadProgress = this.task.percentageChanges();
    //Update
    var user = firebase.auth().currentUser;
    this.updateProfilePicture(user, this.task.downloadURL());
  }

  //Get the logged user's information
  loggedUserInfo() {
    this.authService.getAuth().subscribe(auth => {
      if (auth) {
        this.auxAuth = auth;
      }
    });
  }

  //Update the user's profile picture
  updateProfilePicture(user, url) {
    user
      .updateProfile({
        photoURL: url
      })
      .then(function() {
        console.log("DONE");
      })
      .catch(function(error) {
        console.log(error);
      });
  }
}

任何人都可以告诉我发生了什么,为什么会失败?预先感谢。

0 个答案:

没有答案