使用JS和Firebase上传图像后显示模态

Question

将图像上传到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;

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

Answer 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或文件。正在获取下载网址...

开始获取下载URL

文件可在...

因此，代码执行的顺序与文件中的执行顺序不同。取而代之的是，在完成对服务器的调用之后，才稍后调用回调。因此，任何需要来自服务器的数据的代码都必须在回调函数中，或从那里调用。

[尚未调用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);
});