Загрузите файлы из хранилища Firebase, используя ReactJs - PullRequest
Новая
       36

Загрузите файлы из хранилища Firebase, используя ReactJs

0 голосов
/ 31 марта 2020

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

Показать функцию файла: 

 showFileUrl(){

   storageRef.child('UploadedFiles/').listAll().then(function(res) {
      res.items.forEach(function(folderRef) {
        console.log("folderRef",folderRef.toString());
        var blob = null;
        var xhr = new XMLHttpRequest(); 
        xhr.open("GET", "downloadURL"); 
        xhr.responseType = "blob";
        xhr.onload = function() 
        {
        blob = xhr.response;//xhr.response is now a blob object
        console.log(blob);
    }
        xhr.send();
      });

    }).catch(function(error) {

    });
  }

Это журнал сети, который Я нашел это при отладке. Что мне нужно сделать, чтобы получить все данные и визуализировать их в таблице, а также нажать кнопку загрузки и нажать кнопку, чтобы загрузить файл

Сетевой журнал: enter image description here

Хранение в базе данных: enter image description here

Объект BLOB-файлов из файлов: enter image description here

1 Ответ

0 голосов
/ 31 марта 2020

Ваш код получает список всех файлов, но фактически ни к чему не читает данные для каждого файла.

При использовании SDK для веб-клиента единственный способ получить данные для файл через URL загрузки, как показано здесь . Так что вам нужно:

  1. L oop через все файлы, которые вы возвращаете из listAll() (вы уже делаете это).
  2. Вызовите `getDownloadURL как показано здесь , чтобы получить URL для загрузки каждого файла.
  3. Затем используйте другую библиотеку / функцию (например, fetch() / XMLHTTPRequest) для чтения данных для каждого файла.
  4. В качестве альтернативы, если ваши файлы являются изображениями, вы можете поместить URL-адрес загрузки в тег img в качестве предварительного просмотра.
...