成功将图像上传到 Firebase 存储后，Firebase 获取下载 URL

Posted 2023-02-22

【中文标题】成功将图像上传到 Firebase 存储后，Firebase 获取下载 URL

【英文标题】：Firebase get Download URL after successful image upload to firebase storage

【发布时间】：2018-01-24 14:57:24

【问题描述】：

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

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

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，但我不断收到错误消息。我正在尝试获取 url，以便将其分配给 this.image 变量，然后使用另一个函数将其存储在我的数据库中。

【问题讨论】：

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

Image 在构造函数上方定义为 image:any

我想我可能已经想通了，会更新原帖。

很高兴听到您找到解决方案 Brian。您可以将其发布为答案吗？在 Stack Overflow 上，自我回答是可以接受的，因为只要问题得到解决，谁回答你的问题并不重要。

当然是@FrankvanPuffelen :)

【参考方案1】：

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

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

【讨论】：

感谢您的更新和分享。

【参考方案2】：

我想我已经想通了，而且它似乎正在工作，我意识到我必须从快照中获取 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 分配给快照下载URL，如下所示：

this.image = snapshot.downloadURL;

我希望这可以帮助别人！

【讨论】：

请根据其他答案更新答案，这不再有效

【参考方案3】：

在 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)
    )
  )

【参考方案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) )
    
  )

【参考方案5】：

从网络版本 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)
    )