Question

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

我已尝试过所有内容，但似乎无法获取网址，只会在控制台中显示错误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)

任何人都知道为什么？

这是我的代码片段。 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

我愿意打赌你试图获取一些尚不存在的网址。

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

上传后无法立即从存储中获取firebase图片网址

2 个答案: