Получить URL из загруженного изображения на Firebase

Question

Я загрузил изображение в хранилище Firebase, но когда я пытаюсь получить URL, я получаю «uploaded_image.ref не является функцией» .....

HTML

<form>
<input id="select_Image" type="file" required>
<button type="submit">Upload Image</button>
</form>

JS

let image_url = ""; 

function uploadImage {

  const image = input_image.files[0];
  const path = storage.ref("imagefolder/" + image.name);

  const uploaded_image = path.put(image);
  const the_url = uploaded_image.ref().getDownloadURL();

  image_url = the_url; 
  alert(image_url);

}

Answer 1

И метод put(), и метод getDownloadURL() должны вызывать сервер для выполнения своей работы. По этой причине они возвращают обещание, и вам нужно дождаться его выполнения, чтобы получить свои результаты.

Кроме того, вы можете получить URL-адрес для загрузки только после того, как оно было загружено. Поэтому вы должны вызывать getDownloadURL() только после завершения put().

В коде, который будет выглядеть примерно так:

function uploadImage {
  const image = input_image.files[0];
  const path = storage.ref("imagefolder/" + image.name);

  path.put(image).then(function() {
    path.getDownloadURL().then(function(url) {
      alert(url);
    }
  }
}

Как сказано в комментариях, downloadUrl используется только внутри обратного вызова. Если вы используете его в другом месте, он может не иметь того значения, которое вы хотите. Поэтому любой код, который требует URL загрузки, должен быть внутри обратного вызова или вызываться оттуда.

См. Также:

• Изображение из облачного хранилища не восстанавливается. список карт
• Firebase web: загрузить несколько файлов в хранилище и затем загрузить их URL-адреса
• Показать модальный режим после загрузки изображений с JS и Firebase

Answer 2

Насколько я могу судить, функция .put() имеет асин c, поэтому вам нужно обработать обратный вызов и вместо этого выполнять свою работу внутри этой функции. Вы можете сделать это с помощью asyn c, await или просто использовать замыкание:

const uploaded_image = path.put(image).then((snapshot) => {
     alert("Done!");
   }); 

Кроме того, согласно документам , вам на самом деле не нужно, чтобы сервер сообщал Вы URL, потому что вы должны создать его самостоятельно.