使用 JS 和 Firebase 上传图像后显示模式答案

【问题标题】：Show a modal after images are uploaded with JS and Firebase使用 JS 和 Firebase 上传图像后显示模式
【发布时间】：2020-02-15 05:16:53
【问题描述】：

如何在图像上传到 Firebase 存储后显示模式。

   imgRef1.put(file1).then(function(snapshot) {
            console.log('Uploaded a blob or file!');
                snapshot.ref.getDownloadURL().then(function(downloadURL) {
                    console.log("File available at", downloadURL);
                    imgAns1 = downloadURL;
                });
   }).catch(error => {
        console.log("Error Occured");
   });;

我正在使用上述代码上传一个文件，并获取图像 URL。然后我将它分配给模式中的 imageview src。

 document.getElementById("imgSelectAns1").src = imgAns1;

但是当模态打开时，图像不会加载，因为上传它需要一些时间。图片上传成功后如何打开modal？

【问题讨论】：

document.getElementById("imgSelectAns1").src = imgAns1; 你到底在哪里？你能展示你的整个代码吗？包括模态窗口的代码。我们需要查看完整代码才能为您提供帮助。

标签： javascript firebase firebase-storage

【解决方案1】：

上传数据和获取下载 URL 都是异步操作。在对服务器的调用正在进行时，您的其余代码将继续运行。然后当服务器返回数据时，你的回调就会被调用。

如果你放置一些日志语句，这是最容易理解的：

console.log("Starting upload...");
imgRef1.put(file1).then(function(snapshot) {
    console.log('Uploaded a blob or file. Getting download URL...');
    snapshot.ref.getDownloadURL().then(function(downloadURL) {
        console.log("File available at", downloadURL);
        imgAns1 = downloadURL;
    });
    console.log("Started getting download URL");
}).catch(error => {
    console.error("Error occurred: "+error);
});
console.log("Started upload");

如果你运行这段代码，输出将是：

开始上传...

开始上传

上传了一个 blob 或文件。正在获取下载地址...

开始获取下载地址

文件位于...

因此代码的执行顺序与文件中存在的顺序不同。相反，在对服务器的调用完成后，稍后会调用回调。因此任何需要来自服务器的数据的代码都需要在回调函数中，或者从那里调用。

您很可能是从代码中的某处调用 document.getElementById("imgSelectAns1").src = imgAns1，此时尚未调用 imgAns1 = downloadURL。

解决方法是将代码移到回调中：

imgRef1.put(file1).then(function(snapshot) {
    snapshot.ref.getDownloadURL().then(function(downloadURL) {
        document.getElementById("imgSelectAns1").src = downloadURL;
    });
}).catch(error => {
    console.error("Error occurred: "+error);
});

【讨论】：