Firebase成功上传图片到存储后获取下载URL

Question

我正在尝试将单个图像上传到Firebase Storage，然后获取其下载URL并将其分配给一个变量。

我可以成功地将图像上传到Firebase，但是我无法检索下载URL。这是我已经尝试过的。

upload() {
    let storageRef = firebase.storage().ref();
    let success = false;

    for (let selectedFile of [(<HTMLInputElement>document.getElementById('file')).files[0]]) {
      let router = this.router;
      let af = this.af;
      let folder = this.folder;
      let path = `/${this.folder}/${selectedFile.name}`;
      var iRef = storageRef.child(path);
      iRef.put(selectedFile).then((snapshot) => {
        console.log('Uploaded a blob or file! Now storing the reference at', `/${this.folder}/images/`);
        af.list(`/${folder}/images/`).push({ path: path, filename: selectedFile.name })
      });
    }

    // This part does not work
    iRef.getDownloadURL().then((url) => {this.image = url});
    console.log('IREF IS ' + iRef)
    console.log('IMAGEURL IS ' + this.image)

  }

控制台日志如下：

    IREF IS gs://my-app-159520.appspot.com/images/Screen Shot 2017-08-14 at 12.19.01.png
    view-order.component.ts:134 IMAGEURL IS undefined
Uploaded a blob or file! Now storing the reference at /images/images/

我一直在尝试使用iRef参考来获取下载链接，但是我一直在遇到错误。我正在尝试获取url，以便将其分配给this.image变量，然后使用另一个函数将其存储在我的数据库中。

- Brian Revie

---

image 定义在哪里？为什么它是 undefined？ - onetwo12

图像在构造函数之前作为 image:any 定义。 - Brian Revie

我想我可能已经弄清楚了，将会更新原始帖子。 - Brian Revie

很高兴听到你找到了解决方案，Brian。你能把它发布为答案吗？在Stack Overflow上，自我回答是可以接受的，因为重要的不是谁回答了你的问题，而是问题是否得到了解决。 - Frank van Puffelen

当然，@FrankvanPuffelen :) - Brian Revie

Answer 1

API已更改。使用以下内容获取downloadURL

  snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log("File available at", downloadURL);
  });

- FacePalm

---

感谢您的更新和分享。 - Brian Revie

Answer 2

从web版本v9（模块化）开始，您可以通过以下方式实现：

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage"; 

uploadImage = () => {
  const storage = getStorage()
  const reference = ref(storage, 'file_name.jpg')
  const file = e.target.files[0]

  uploadBytes(reference, file)
    .then(snapshot => {
      return getDownloadURL(snapshot.ref)
    })
    .then(downloadURL => {
      console.log('Download URL', downloadURL)
    })
}

- PeeJee

Answer 3

我认为我已经弄清楚了这个问题，并且它似乎正在运行。我意识到我需要从快照中获取downloadURL，然后将其分配给this.image，就像这样：

upload() {
    let storageRef = firebase.storage().ref();
    let success = false;

    for (let selectedFile of [(<HTMLInputElement>document.getElementById('file')).files[0]]) {
      let router = this.router;
      let af = this.af;
      let folder = this.folder;
      let path = `/${this.folder}/${selectedFile.name}`;
      var iRef = storageRef.child(path);
      iRef.put(selectedFile).then((snapshot) => {

        // added this part which as grabbed the download url from the pushed snapshot
        this.image = snapshot.downloadURL;

        console.log('Uploaded a blob or file! Now storing the reference at', `/${this.folder}/images/`);
        af.list(`/${folder}/images/`).push({ path: path, filename: selectedFile.name })

        console.log('DOWNLOAD URL IS ' + this.image)
      });
    }

  }

我随后运行了另一个函数将URL添加到数据库中，它已经按照预期进入了数据库！

所以，我已经将图像上传到数据库中，然后使用put函数的快照，将我的变量image:any分配给了快照downloadURL，如下所示：

this.image = snapshot.downloadURL;

希望这能帮助其他人！

- Brian Revie

---

请根据其他答案更新答案，此方法已不再适用。 - syonip

Answer 4

.put() 函数返回一个任务，可以用来跟踪上传状态。

例如，您可以像下面这样监听进度、错误或完成：

onUploadImage () {
  const self = this
  const file = self.selectedFile
  if (!file) {
    return
  }
  self.isUploading = true
  const storageRef = firebase.storage().ref('/images/' + file.name)
  const task = storageRef.put(file)
  task.on('state_changed',
    function progress (snapshot) {
      self.status = 'UPLOADING...'
      self.percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
    },
    function error () {
      self.status = 'FAILED TRY AGAIN!'
      self.isUploading = false
    },

    function complete (event) {
      self.status = 'UPLOAD COMPLETED'
      self.isUploading = false
      storageRef.getDownloadURL().then((url) => { console.log(url) })
    }
  )
}

- Mohammad Hazara

Answer 5

在2019年，我使用以下功能获得了firebase中新保存文件的url：

const uploadImage = async(uri) => {
  const response = await fetch(uri);
  const blob = await response.blob();
  // child arg specifies the name of the image in firebase
  const ref = firebase.storage().ref().child(guid());
  ref.put(blob).then(snapshot => {
    snapshot.ref.getDownloadURL().then(url => {
      console.log(' * new url', url)
    })
  })
}

- duhaime