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>
<% } %>

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

Node.js display all images of a user in ejs from database

mysql

sql

ejs

node.js

express