上传后无法立即从存储中获取 Firebase 图像 URL

Question

我正在为应用程序使用 Firebase 存储，以便可以存储要在弹出窗口中显示的图像。现在我可以参考图像，但我无法使用getDownloadURL() 获取图像的URL。

我已经尝试了所有方法，但似乎无法获取 URL，并且只在控制台中出现错误提示 Error: Reference.push failed: the first argument contains undefined in property 'markers.imageURL.i'", AND " Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404)

有人知道为什么吗？

这是我的代码的 sn-p。 imageFURLY 是不返回 URL 的。

document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
                    // This function saves the newly created marker and the infowindow information when
                    //the 'Submit' button is clicked.

                    var fileInput = document.getElementById('fileInput');
                    var file = fileInput.files[0];
                    //Create storage ref
                    var storageRef = firebase.storage().ref('markerpics/' + file.name);
                    var task = storageRef.put(file);
                    
                    console.log('storageRef ', storageRef)
                    imageFURL = storageRef;
                    console.log('imageFURL ', imageFURL);
                    //Upload file
                    imageFURLY = imageFURL.getDownloadURL();
                    console.log('imageFURLY ', imageFURLY);


                    //Variables that store data inputted in infowindow
                    var postName = document.getElementById('formName');
                    var postNameF = postName.value;
                    var postMessage = document.getElementById('formMessage');
                    var postMessageF = postMessage.value;
                    var postImageRef = imageFURLY;
                    console.log('postImageRef - URL: ', postImageRef);
                    var latitude = location.lat(location);
                    var longitude = location.lng(location);


                    //Closes markers open infowindow
                    largeInfowindow.close(map, marker);
                    //Sets markers infowindow to NEW content
                    console.log('Setting infowindow content!! ');
                    largeInfowindow.setContent('<div>' + '<div>Name: ' + postNameF + '</div><br>' + '<div>Message: ' + postMessageF + '</div><br>' + '<div>Image: ' + '</div>' + '<img style="height: 100px; width: 100px;" src="' + postImageRef + '" alt="Mountain View">' + '<br>' + '</div>');
                    console.log('Set infowindow content!! ');
                    largeInfowindow.open(map, marker);
                    // Make sure the marker property is cleared if the infowindow is closed.
                    largeInfowindow.addListener('closeclick', function () {
                        largeInfowindow.marker = null;
                    });

Answer 1

我敢打赌，您正在尝试获取尚不存在的东西的 URL。

document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
// This function saves the newly created marker and the infowindow information when
//the 'Submit' button is clicked.

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
//Create storage ref
var storageRef = firebase.storage().ref('markerpics/' + file.name);

到目前为止一切顺利

var task = storageRef.put(file);

这是推迟的。 task 是一个承诺。

console.log('storageRef ', storageRef)
imageFURL = storageRef;
console.log('imageFURL ', imageFURL);
//Upload file
imageFURLY = imageFURL.getDownloadURL();

put 尚未执行，但您正在调用getDownloadURL()。因此，它还没有！你会得到一个 404。

以下是您解决问题的方法：

document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
// This function saves the newly created marker and the infowindow information when
//the 'Submit' button is clicked.

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
//Create storage ref
var storageRef = firebase.storage().ref('markerpics/' + file.name);

var task = storageRef.put(file);
task.then(function(snapshot) {
    console.log('storageRef ', storageRef)
    imageFURL = storageRef;
    console.log('imageFURL ', imageFURL);
    //Upload file
    imageFURLY = imageFURL.getDownloadURL();
    // ...
});

Answer 2

let file = await bucket.upload(fromFilePath, {destination: toFilePath});
const trimUrl = file[0].metatata.mediaLink