如何在mongoDB中检索所有图像以显示React应用

时间:2019-06-21 00:20:47

标签: node.js reactjs mongodb gridfs

最近,我开始使用节点,反应和网格fs开发Pinterest式的Web,以研究Web开发。我成功检索了一个图像并将其显示在客户端。但是我不能拉多个图像。通过访问本地服务器,图像加载似乎在中间停止了。 我研究了几个类似的帖子。但是,我找不到在MongoDB上检索所有图像以显示在React应用上所需的答案。感谢您给我一个解决方案。预先谢谢你。

节点

router.get("/getall", (req, res) => {
  gfs.files.find().toArray((err, files) => {
    files.map(file => {
      console.log(file.filename);

      const readStream = gfs.createReadStream(file.filename);
      readStream.pipe(res);
      readStream.on("end", () => {
        console.log("file sent");
      });
    });
  });
});

反应

  const getImages = async e => {
    e.preventDefault();
    try {
      const res = await axios("/api/getall", { responseType: "blob" });
      console.log(res);
      res.map(image => {
        const blobURL = URL.createObjectURL(image.data);
        setReceivedImgState({ imageData: blobURL });
        console.log(blobURL);
      });
    } catch (err) {
      console.error(err.message);
    }
  };

检索所有图像,然后在客户端上呈现

0 个答案:

没有答案