Question

我有一个Express API和一个Node / React客户端。客户端从API请求图像文件，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 Web文档）。

我的最终目标是从流中读取多个图像，然后使用React构建一堆标签。似乎应该是一个简单的过程。

谢谢！

从ReadableStream

0 个答案: