выполните итерацию по хранилищу firebase для отображения нескольких изображений

#javascript #firebase

# #javascript #firebase

Вопрос:

В настоящее время я могу получить конкретное изображение, зная его название и местоположение в хранилище, но я хочу иметь возможность отображать все изображения в одной папке внутри моего хранилища, зная местоположение этой папки хранения, но не заголовки содержимого.

Я попытался использовать приведенный ниже код (ProjectID — это папка, в которой мне нужно показать все элементы), но, похоже, это не работает. Я новичок в javascript, поэтому прошу прощения за неправильный вызов функции .once .

 const childRef = storageRefer.child(`${projectID}`);
childRef.once("value", function(snapshot) {
  snapshot.forEach(function(child) {
    child.getDownloadURL().then(function(url) {
      console.log(url);
    });
  });
}); 

этот код должен иметь возможность регистрировать URL всех изображений, но все, что я получаю, это ошибка о функции .once . Если кто-нибудь знает, что я делаю неправильно, или лучший способ собрать все изображения в одну папку в моем хранилище, это было бы очень полезно, спасибо!

Редактировать:

Оглядываясь назад, я понял, что могу сохранить местоположение изображений в базе данных для них, поскольку я могу легко выполнять итерации по базе данных, не зная, что внутри, и вызывать хранилище для получения изображения, но это кажется неаккуратным?

Ответ №1:

В настоящее время в хранилище Firebase нет вызова API для перечисления всех файлов в папке. Если вам нужна такая функциональность, вы должны хранить метаданные файлов (например, URL-адреса загрузки) в месте, где вы можете их перечислить. Firebase Firestore идеально подходит для этого и позволяет вам также легко делиться URL-адресами с другими.

Комментарии:

1. Я вижу, как это будет работать, но, кажется, я получаю сообщение об ошибке Uncaught TypeError: childRef.once is not a function : «Знаете ли вы, почему это может быть?» Я еще раз прошу прощения, поскольку я привык к таким языкам, как python и java, и не так привык к javascript.

2. что такое storageRefer? Вы не можете напрямую загрузить файл из хранилища, вместо этого получите доступ к его URL-адресу из documents и вызовите image

3. извините за это, const storage = firebase.storage(); const storageRefer = storage.ref(); определяется в операторе script, встроенном непосредственно в мой html, поэтому я могу вызвать его из любого из моих файлов javascript, что вы подразумеваете под доступом к изображению из документов? Я могу получить изображение напрямую, используя такую функцию, как storageRefer.child('${projectID}').child("horse.jpg").getDownloadURL().then(function(url) {document.querySelector("#imgUpload").setAttribute("src", url)});

4. что вы получаете на консоли. журнал дочерней ссылки?

5. Спасибо за вашу помощь, я надеялся, что найдется способ получить эту информацию, как вы можете, в базах данных, потому что тогда это не потребует двойного хранения информации

Ответ №2:

  var listRef = firebase.storage().ref().child('profiles/');


  listRef.listAll().then(function(res){
     res.items.forEach(function(itemRef){
      itemRef.getDownloadURL().then(function (link) {
        console.log(link);
      })
    
   })
 })
}
 

Эта функция возвращает все фотографии, сохраненные в хранилище «Профиль».
Я надеюсь, что это сработает для вас.

Комментарии:

1. Добро пожаловать! Использование английского языка как бы ожидается в сообщениях SO.

2. О, пожалуйста, извините. Я не понимал, что комментировал по-испански.

Ответ №3:

@Shodmoth Проверьте эту новую ссылку на firebase (https://firebase.google.com/docs/storage/web/list-files ) для получения списка всех файлов в папке.

 // Create a reference under which you want to list
var listRef = storageRef.child('files/uid');

// Find all the prefixes and items.
listRef.listAll().then(function(res) {
  res.prefixes.forEach(function(folderRef) {
     console.log(folderRef)
  });
  res.items.forEach(function(itemRef) {
     console.log(itemRef) //can call .getDownloadURL() on each itemRef
  });
}).catch(function(error) {
  // Uh-oh, an error occurred!
});