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

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

1 个答案: