有没有办法将 ReadableStream<Uint8Array> 传输到 NextApiResponse 中？

Question

我想在我的 NextJS 应用程序中显示 Google Place Photos。要从指定的 URL 获取这些图像，需要 API 密钥，但同时，我不想将此 API 密钥公开给公众。

我的目标是实现一个 NextJS API 路由，从 Google Places Photos 获取并返回指定的图像，同时还可以直接从图像标签访问，如下所示：

<img src={`/api/photos/${place?.photos[0].photo_reference}`} alt='' />

我在网上发现了一些不同的来源，建议我将响应流从我的谷歌请求直接传输到传出响应的响应流，如下所示：

<img src={`/api/photos/${place?.photos[0].photo_reference}`} alt='' />

然而，由于response.body是一个ReadableStream，它没有.pipe()函数。相反，它有 .pipeTo() 和 .pipeThrough()。

然后我尝试了

response.body.pipeTo(res);

但是，这也不起作用，因为 res 是 NextApiResponse 而不是 WritableStream。虽然我在网上搜索过，但我还没有找到如何像WritableStreams那样写入NextApiResponse。

最后，我尝试手动将响应转换为缓冲区并将其写入 NextApiResponse，如下所示：

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const response = await fetch(
    `https://maps.googleapis.com/maps/api/place/photo
  &photo_reference=${id}
  &key=${process.env.GOOGLE_PLACE_API_KEY}`,
  );

  if (!response.ok) {
    console.log(response);
    res.status(500).end();
    return;
  }

  response.body.pipe(res);
}

虽然这完成了响应，但没有显示图像。

如何直接将检索到的谷歌地点图像从服务器传递到前端，以便标签可以使用它？

Answer 1

对我有用的是简单地将 ofresponse.body类型转换ReadableStream<Uint8Array>为 aNodeJS.ReadableStream然后使用该pipe函数。

const readableStream = response.body as unknown as NodeJS.ReadableStream;
readableStream.pipe(res);