从节点js发送多张图片到前端

Question

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

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

查看该图片

注意：我在这里从 table 中获取图像名称 - 这些图像位于事件文件夹中（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 文件。他们没有将响应发送到前端，因此我们可以获得图像并在 ui built 中显示出来，或者 angular.

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

Answer 1

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

Answer 2

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

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

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

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

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

这些图像的 URL 将是：

localhost:<port number>/<image name>

例如：

localhost:3000/car.png localhost:3000/flower.jpg

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

类似于：172.32.112.12:3000/car.png

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

从节点js发送多张图片到前端

Send multiple images from node js to frontend

api

backend

node.js

express

reactjs