Firebase 存储 - 将图像上传到 Firebase 存储并在实时数据库中创建指向该图像的链接

Posted 2023-03-22

【中文标题】Firebase 存储 - 将图像上传到 Firebase 存储并在实时数据库中创建指向该图像的链接

【英文标题】：Firebase Storage - Upload image to firebase storage and create a link to that in realtime database

【发布时间】：2018-08-23 12:56:20

【问题描述】：

我无法将图像上传到 Firebase 存储。我需要在 html 中有一个带有文件类型的输入对象。然后，我需要为该输入选择的图像上传到我的项目的 firebase 存储。还有一种方法可以将该图像的位置存储在实时数据库中，以便以后可以访问它？我该怎么做？

提前谢谢你

【问题讨论】：

是的，但我主要是在寻找有关如何轻松上传图片的信息

好吧：firebase.google.com/docs/storage/web/upload-files 是唯一的方法。之后你可以在下面实现我的答案

查看这个实用程序类，以将图像、视频和文件上传到 Firebase 存储。 handyopinion.com/…

【参考方案1】：

要链接到数据库试试这个：

var ref= firebase.database().ref("Uploads");
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');
pathReference.getDownloadURL().then(function(url) 
ref.push().set(
imgurl: url
);

更多信息在这里：

https://firebase.google.com/docs/storage/web/download-files

https://firebase.google.com/docs/storage/web/upload-files

将其添加到存储后，您将能够使用getDownloadUrl() 获取url，然后将其添加到数据库中：

Uploads
  pushid
     imgurl: url

【讨论】：

我认为你的意思是 put()，而不是 push()。

无push()创建一个randomid，然后在其下设置图片

【参考方案2】：

查看示例应用程序，使用 Firestore(Storage) 保存图像文件，并使用 Cloud Storage(Database) 保存图像路径、名称和文件大小。

上传图片

// The main task
this.task = this.storage.upload(path, file,  customMetadata );

保存图片信息

  addImagetoDB(image: MyData) 
    //Create an ID for document
    const id = this.database.createId();

    //Set document id with value in database
    this.imageCollection.doc(id).set(image).then(resp => 
      console.log(resp);
    ).catch(error => 
     console.log("error " + error);
    );
  

源码教程Link