上傳后無法立即從存儲中獲取 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)

有人知道為什么嗎？

這是我的代碼片段。 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