将图像上传到 firebase 并在数据库中设置链接答案

【问题标题】：Upload image to firebase and set a link in database将图像上传到 firebase 并在数据库中设置链接
【发布时间】：2017-08-07 22:42:26
【问题描述】：

我知道如何将数据添加到 firebase 数据库，我知道如何将图像上传到 firebase 存储。我在 javascript 中执行此操作。

我无法弄清楚如何将图像链接到我的数据库对象。

我的数据库对象是这样的

{
name:'alex',
age:23,
profession:'superhero'
image:*what to put here ???*
}

一个想法是使用创建的对象引用并使用相同的引用存储图像。

任何教程或想法表示赞赏。

【问题讨论】：

当图像完成上传到存储时，使用函数将链接写入数据库。或者按照这个例子，当 PutFileAsync() 完成时只做一个数据库写入。这里有什么问题？你试过什么？什么平台？
仅供参考 - this codelab 上的最后一个示例演示了上传图像并将结果存储在数据库中。还有 web/ios 版本。

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

【解决方案1】：

我们通常建议存储 gs://bucket/path/to/object 引用，否则存储 https://... URL。

查看Zero to App，它与source code相关联（这里我们使用https://...版本）作为实际示例。

【讨论】：

便携性和安全性。任何存储客户端（Firebase 或 Google Cloud Storage）都可以从 gs URI 创建下载 URL，而目前，https URL 更特定于 Firebase。此外，https URL 可公开访问，而 gs URI 需要安全规则或 IAM 检查才能检索下载 URL 或内容。

【解决方案2】：

var storageRef = firebase.storage().ref('some/storage/bucket');
var saveDataRef = firebase.database().ref('users/');
var uploadTask = storageRef.put(file);

uploadTask.on('state_changed', uploadTick, (err)=> {
  console.log('Upload error:', err);
}, ()=> {
  saveDataRef.update({
    name:'alex',
    age:23,
    profession:'superhero'
    image:uploadTask.snapshot.downloadURL
  });
});

这个上传函数位于一个 ES6 类中，并从调用组件传递一个回调 (uploadTick) 用于 .on('state_changed')。这样您就可以传回上传状态并将其显示在 UI 中。

uploadTick(snap){
  console.log("update ticked", snap)
  this.setState({
    bytesTransferred:snap.bytesTransferred,
    totalBytes:snap.totalBytes
   })
}

要上传的文件是传给这个上传函数的，但是我只是用一个react表单上传来获取文件并对其做一点处理，你的做法可能会有所不同。

【讨论】：