Чтение нескольких файлов изображений из ReadableStream - PullRequest
0 голосов
/ 17 апреля 2019

У меня есть Express API и клиент Node / React.Клиент делает запрос, чтобы запросить файлы изображений из API, который получает их от S3, а затем отвечает потоком:

  fs.readdir(tempDir, function (err, files) {
    if (err) {
      return console.log('Unable to scan directory: ' + err);
    }
    let filesData = files.map(file => fs.readFileSync(`${tempDir}/${file}`));

    res.status(200).send(filesData);
  });

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

function arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = [].slice.call(new Uint8Array(buffer));

    bytes.forEach((b) => binary += String.fromCharCode(b));

    return window.btoa(binary);
  };

  res.arrayBuffer()
  .then((buffer) => {
    console.log(buffer);
    var base64Flag = 'data:image/gif;base64,';
    var imageStr = arrayBufferToBase64(buffer);

    this.setState({
      imageSrc: base64Flag + imageStr
    });
  });

В этом примере изображение не отображается в теге (src= {this.state.imageSrc}), и, кажется, все усложняет.

const reader = stream.getReader();
  let newStream = new ReadableStream({
    start(controller) {
      return pump();
      function pump() {
        return reader.read().then(({ done, value }) => {
          if (done) {
            controller.close();
            return;
          }

          controller.enqueue(value);
          return pump();
        });
      }
    }
  })
  .then(stream => new Response(stream));

В этом примере показано, что ошибка «anonymous.then ()» не является функцией.В нем также не рассматривается, как читать несколько файлов (веб-документы Mozilla).

Моя конечная цель - прочитать несколько изображений из потока и затем создать кучу тегов с помощью React.Похоже, это должен быть простой процесс.

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...