AngularFire 上传并获取下载地址 [英] AngularFire upload and get download URL

问题描述

我正在尝试上传到我的存储桶，然后在上传完成后立即获取该上传文件的 downloadURL.这之前可以使用，但后来由于某种原因停止了.

I'm trying to upload to my Storage bucket and then get the downloadURL to that uploaded file right after the upload is done. This was working previously but has since stopped for some reason.

我的控制台打印只是返回 null.我希望有一个解决方案甚至更好的方法来做到这一点.任何帮助都会很棒！

My console print is just returning null. I was hoping for a solution or even a better way of doing this. Any help would be awesome!

我使用的是 Angular 5.

I'm using Angular 5.

这是我目前的方法:

  upload(event) {
    this.showProgressBar = true;
    const randomId = Math.random().toString(36).substring(2);
    this.ref = this.afStorage.ref(randomId);
    this.uploadTask = this.ref.put(event.target.files[0]);
    this.uploadProgress = this.uploadTask.percentageChanges().subscribe(progress => {
      console.log(progress);
      document.querySelector('#progressBar').style.width = progress + "%";
      if(progress === 100){
        this.showProgressBar = false;
        this.showUploaded = true;
        this.downloadURL = this.uploadTask.downloadURL().subscribe(url => {
          console.log(url);
        });
      }
    });
  }

推荐答案

这是我使用 angularfire 2 进行文件上传过程的编码方式.

Here is the way that I coded using angularfire 2 for the file uploading process.

public selectedFile: FileList;
chooseFile(event) {
  this.selectedFile =  event.target.files;
}

uploadImage() {
  const file = this.selectedFile.item(0);
  const key = 'uploads/' + '/' + Math.floor(Math.random() * 1000000) + file.name;
  const upload = this.stroge.upload(key, file).then(() => {
    const ref = this.stroge.ref(key);
    const downloadURL = ref.getDownloadURL().subscribe(url => {
      this.Updateprofile(url);
    });   
  });
}

这篇关于AngularFire 上传并获取下载地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！