使用JS和Firebase上传图像后显示模态 [英] Show a modal after images are uploaded with JS and Firebase

问题描述

将图像上传到Firebase存储后如何显示模式.

How to show a modal after images being uploaded to firebase storage.

   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.

I am uploading a file with the above code, and getting the image URL. And then I am assigning it to a imageview src in a modal.

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

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

But when modal opens up image won't load because it takes some time to upload this. How can I open the modal after the image is being successfully uploaded ?

推荐答案

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

Both uploading data and getting a download URL are asynchronous operations. While the call to the server is going on, the rest of your code continues to run. Then when the server has returned data, your callback gets called.

如果放置一些日志记录语句，这最容易理解:

This is easiest to understand if you place some logging statements:

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");

如果运行此代码，输出将是:

If you run this code, the output will be:

开始上传...

Starting upload...

开始上传

上传了Blob或文件.正在获取下载网址...

Uploaded a blob or file. Getting download URL...

开始获取下载URL

文件可在...

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

So the code doesn't execute in the same order as it exists in your file. Instead the callbacks get called later, after the calls to the server are complete. Because of this any code that needs the data from the server needs to be inside the callback function, or be called from there.

很可能是在尚未调用imgAns1 = downloadURL的情况下，从代码中的某个位置调用document.getElementById("imgSelectAns1").src = imgAns1.

Most likely you're calling document.getElementById("imgSelectAns1").src = imgAns1 from somewhere in your code, when imgAns1 = downloadURL hasn't been called yet.

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

The fix is to move that code into the callback:

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

这篇关于使用JS和Firebase上传图像后显示模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！