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