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

【问题标题】：Firebase Storage - Upload image to firebase storage and create a link to that in realtime databaseFirebase 存储 - 将图像上传到 Firebase 存储并在实时数据库中创建指向该图像的链接
【发布时间】：2018-08-23 12:56:20
【问题描述】：

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

提前谢谢你

【问题讨论】：

是的，但我主要是在寻找有关如何轻松上传图片的信息
好吧：firebase.google.com/docs/storage/web/upload-files 是唯一的方法。之后你可以在下面实现我的答案
查看这个实用程序类，以将图像、视频和文件上传到 Firebase 存储。 handyopinion.com/…

标签： firebase firebase-realtime-database firebase-storage

【解决方案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/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

【讨论】：