将多个图像从节点 js 发送到前端

Question

我正在实现一个画廊，我想在其中显示页面中的所有图像 - Reactjs 或 Angular

如何从 NODE 向前端发送多个图像？我能够发送一个保存在 nodejs 文件夹中的图像文件。 下面是发送单个图像的代码 - 我能够使用 POSTMAN 看到该图像

注意：这里我从表格中获取图像名称 - 这些图像在事件文件夹中（image1.jpg，image2.jpg...）

  console.log(req.files);
  const {id} = req.params;
  var sql = "SELECT image from users_image where id = ?";
  var query = db.query(sql, [id], function(err, result) {
    if(err){
      console.log("Error ", err);
      res.status(500).send(err)
    } else {
      const fileNameAndPath = result[0].image; //image1.jpg
      if(err) res.status(500).send(err);
      res.sendFile(fileNameAndPath, { root: './public/images/upload_images/event' })
    }
  });
}

但我无法使用 sendFile() 发送多个图像，因为它只能发送单个图像。 我该如何实现？

如果我从节点发送多张图片，是否可以使用邮递员获取预览？

我可以找到许多从服务器读取图像但读取同一后端目录中的 html 文件的示例。他们没有将响应发送到前端，因此我们可以获取图像并显示在 react 或 angular 内置的 ui 中。

我的方法正确吗？计划在同一台服务器上部署前端、后端和数据库

Answer 1

如果照片已经托管在您的服务器上，您应该向照片发送一组 url。在前端，您可以遍历 url 数组并使用图像标签显示图像。

Answer 2

如果我理解正确，您的图像位于您的 NODE JS 后端文件夹中的一个文件夹中，并且您希望根据您的 REACT 端的请求发送多个图像。

为此，您可以将在后端存储这些图像的文件夹设为公共静态文件夹。

在您的节点应用程序入口点，

app.use(express.static(__dirname+'/<foldername>'));

现在假设您在名为flower.jpg、car.png 和 jolly.jpg 的文件夹中有一张您想要发送的图片。

这些图片的网址是：

localhost:<port number>/<image name>

例如：

本地主机：3000/car.png 本地主机：3000/flower.jpg

现在要从您的反应代码访问，您需要做的就是将 localhost 替换为您的 NodeJS 服务器的 IP。

类似：172.32.112.12:3000/car.png

您只需要确保图像名称不是常见且简单的名称。 我的图像名称类似于 1639873167172-464191690.jpg。我在将其存储在数据库中时对其进行了更改。