Node.js 显示数据库中 ejs 中用户的所有图像

Question

我是 Node.js 的新手，现在我正在尝试将登录用户的所有图像从我的数据库显示到我的 ejs 文件中。 我已经设置了所有代码，但是我遇到了一个问题，我不知道如何正确显示所有图像。 我也尝试过async functions ，但我似乎没有以正确的方式做它们。 我尝试了多种想法，例如for...of和forEach 。

我注意到，如果我try catch ，则会收到错误Cannot set headers after they are sent to the client这可能是因为我无法多次使用res.render 。 除了此错误，我还收到此错误： UnhandledPromiseRejectionWarning: TypeError: req.next is not a function即使我不使用try catch 。 在这一点上，我不知道显示所有图像的正确方法是什么，所以我来这里寻求帮助。 问题是我并没有真正理解async functions以及是否应该在这种情况下使用它们。

for loop运行良好，当我尝试res.render时，问题就出现了，因为如果我使用console.log(img)我会得到该用户的所有图像。 问题还在于我可以显示 1 个图像，但我不能显示多个

浏览了多个文档和案例，但没有找到解决方案，所以我来到了这里

app.get('/galery/galery', (req, res) => {
   const selectImg = conn.query("SELECT pic_name, user_id FROM galery WHERE user_id =?", [req.session.userId], function (err, result){
    if (result && result.length) {
      for(let i = 0; i < result.length; i++){
          var imgName = await result[i].pic_name
          var img = 'upload/' + imgName
            res.render('./galery/galery', {img: img, imgName: imgName})
          console.log(img)
    }
    return
    res.end()
    } else {
      res.render('./galery/galery')
    }
  })
})

这是我的 ejs 文件

      <div class="galery">
        <% if (typeof img !== 'undefined') {%>
          <img src= "<%= img %>"  alt="img" width="600" height="400">
        <div class="style"><%= imgName %>
        <form action="deleteImg.php" method="post">
          <input type="hidden" name="deleteImg" value="">
            <button class="btn btn-danger" name="delete" type="submit" >delete</button>
          </input>
        </form>
      </div>
      <% }%>
    </div>

Answer 1

据我所知，您的问题是您在循环中多次渲染（如您所说）。 这不是它应该发生的方式。 您只需渲染一次。

您正在正确获取图像数据，然后以您想要的方式修改它并在一个地方收集，一旦完成使用新数据渲染它。

app.get('/galery/galery', (req, res) => {
  const query = 'SELECT pic_name, user_id FROM galery WHERE user_id =?';
  conn.query(query, [req.session.userId], function (err, result) {
    if (result && result.length) {
      const images = [];
      for (const item of result) {
        const imgName = item.pic_name;
        const img = 'upload/' + imgName;
        // { img, imgName } is shorthand for { img: img, imgName: imgName }
        images.push({ img, imgName });
      }
      res.render('./galery/galery', { images });
    } else {
      res.render('./galery/galery', { images: []});
    }
  });
});

现在在ejs方面，您已经有了一个图像列表，您需要对其进行迭代才能正确显示。

<% for(const image of images) { %>
    <div class="galery">
        <img src="<%= image.img %>"  alt="img" width="600" height="400">
        <div class="style"><%= image.imgName %>
            <form action="deleteImg.php" method="post">
                <input type="hidden" name="deleteImg" value="">
                <button class="btn btn-danger" name="delete" type="submit" >delete</button>
            </form>
        </div>
    </div>
<% } %>