时间戳

首页 > 解决方案 > Firebase - 获取下载 URL（Firebase 存储）并将其保存在 Firebase 实时数据库中

javascript - Firebase - 获取下载 URL（Firebase 存储）并将其保存在 Firebase 实时数据库中

问题描述

我一直在尝试制作仅将项目上传到 Firebase 的东西。我无法真正解释该项目，但我想做的是：

  1. 上传文件时获取 Firebase 下载 URL。
  2. 将其保存在 Firebase 实时数据库中。

我为它编写的代码是：

    let downloadURL;
    var filename = filenamechosen;
    var storageRef = firebase.storage().ref('/dav' + 'projects' + '/' + filename);
    var uploadTask = storageRef.put(selectedFile);

    uploadTask.on("state_changed", function(snapshot){

    }, function(error){

    }, function(){
        console.log(uploadTask.snapshot.ref.getDownloadURL());
    });
    };

function uploadOne(){
    let projectinf = document.getElementById("projectinfo").value;
    let name = document.getElementById("studentname").value;
    let cls = document.getElementById("cls").value;
    let email = document.getElementById("email").value;
    let projectlnk = downloadURL;
    let marks = document.getElementById("marks").value;
    let submitfrm = document.getElementById("submitfrm");
    let studentObj = {
        class: cls,
        email: email, 
        projectinfo: projectinf,
        projectlink: projectlnk,
        marks: "lol",
    }
    firebase.database().ref('/schools/dav/').child(`${name}`).set(studentObj).then().catch();
    console.log("done");
}

为了获取下载网址，我得到了这样的回应：

jt {a: 0, i: undefined, c: jt, b: null, f: null, …}
a: 2
b: null
c: null
f: null
g: false
h: false
i: "https://firebasestorage.googleapis.com/v0/b/workspace-c7042.appspot.com/o/davproject.... //Continues

在获取下载 URL 后，我不知道如何将其存储在 Firebase 实时数据库中：

<form action="uploadOne()">
<!--Some inputs as defined in the uploadOne function.-->
<button type="submit">SUBMIT</button>
</form>

这几乎是我在那个东西上使用的整个形式。

标签： javascriptfirebasefirebase-realtime-databasegoogle-cloud-storage

解决方案

该getDownloadURL()方法是异步的，并返回一个通过 downloadURL 解析的 Promise。

因此，您需要按照以下方式做一些事情，使用then()等待 Promise 解决的方法：

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

您的代码中不清楚这两个不同部分是如何链接的（哪一个调用哪个以及如何选择文件），但一种可能性如下所示：

let downloadURL;
var filename = filenamechosen;
var storageRef = firebase.storage().ref('/dav' + 'projects' + '/' + filename);
var uploadTask = storageRef.put(selectedFile);

uploadTask.on("state_changed",
null,  /// <- See https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask#on
null,
function(){
   // Upload completed successfully, now we can get the download URL
    uploadTask.snapshot.ref.getDownloadURL()
    .then(function(downloadURL) {
        console.log('File available at', downloadURL);
        uploadOne(downloadURL);  // <- We call the uploadOne function passing the downloadURL as parameter
    });
});


function uploadOne(downloadURL){
    let projectinf = document.getElementById("projectinfo").value;
    let name = document.getElementById("studentname").value;
    let cls = document.getElementById("cls").value;
    let email = document.getElementById("email").value;
    let projectlnk = downloadURL;
    let marks = document.getElementById("marks").value;
    let submitfrm = document.getElementById("submitfrm");
    let studentObj = {
        class: cls,
        email: email, 
        projectinfo: projectinf,
        projectlink: projectlnk,
        marks: "lol",
    }
    firebase.database().ref('/schools/dav/').child(`${name}`).set(studentObj)
    .then(function() {
        console.log("done");
      })
      .catch(function(error) {
        console.log(error);
      });
}

这样就uploadTask触发了对数据库的写入。您可以根据需要进行调整，但无论如何您只会downloadURL在 Promise 实现时调用回调函数中的值。

推荐阅读