如何使用 ejs 和 express 进行图像选择？

Question

我正在使用 node、express、moongoDB 和 EJS 来制作一个带有自定义帖子管理系统的博客站点。这一切都很好，但我现在正在尝试使用 Cloudinary 从我的 mongoDB 上传的图像将多个图像添加到上传/编辑页面上的帖子中。从理论上讲，它的工作原理非常简单，因为我只需要将图像 ID 或 URL 附加到选定的帖子文档中。但是选择哪个帖子以及一页上的哪些图像让我很头疼。 我正在努力使用与此协调的前端 JS 和 EJS，因为需要在前端进行选择并通过 html 表单发布到后端，我假设使用包含我的图像选择的数组。 我的代码创建了一个名为 'imageSelection' 的数组来存储用户使用 JS 挑选的图像，然后它尝试将 JSON 字符串化并将数组 POST 到服务器进行处理。

我能够使用 JS 将图像保存在一个数组中，并使用 foreach 循环浏览我数据库中的图像以使用 EJS 显示选项。然后我只能弄清楚如何发布静态数据，但这并不能按照我需要的方式工作，因为我想在字符串化之后发布图像选择数组。我似乎无法使用纯 JS 将我存储在我的数组中的数据字符串化并发布到 vanilla JS 中，因为我需要调用一个函数，然后将数据插入到提交的值中。我不确定这是我的代码的唯一问题。

我有一个所选图像的预览，它应该显示，但我不能使用我以前的代码，因为它适用于 EJS，它需要使用纯 JS 才能访问我的“imageSelection”数组。

    <form action="/post-add-imgs" method="post">
  <div class="dropdown">
    <button class="btn btn-primary" type="button" data-toggle="dropdown">Select a Post
    <span class="caret"></span></button>
    <ul class="dropdown-menu  hover_img">
      <%  posts.forEach(function(post){ %>
        <li><a href="#"><%=post.title%></a></li>
        <% }); %>
    </ul>
    </div>

  <div class="uploads-gallery">
    <%  images.forEach(function(image){ %>
      <a href="#" onclick=" addImage(<%=image.url%>); "><img src="<%=image.url%>" alt="preview image" 
  height="100" /></a>
      <% }); %>
  </div>

  <input type="hidden" name=" imageSelection " value="json.stringify(imageSelection);">
  <button type="submit" name="button">Add image choice</button>
  </form>

有没有办法使用 ejs 显示选定的图像，然后在 json.stringify 之后发布它们？ 我需要使用 ajax 来完成这个吗？

感谢所有帮助和明智的话。

Answer 1

我不太确定我是否理解您的问题，但让我们看看我是否可以帮助解决我认为我知道的问题。我认为您需要能够选择一些通过 .ejs 文件呈现的图像，通过客户端 JS 将图像 url 存储在一个数组中，然后将该数组以 POST 请求的形式发送到 Express 服务器。

我会这样做，以您的代码为基础：

客户端

我创建了一个 .ejs 文件，该文件呈现了我的 Express 服务器在“图像”局部变量中发送的一些图像：

<div id="image-container">
  <% images.forEach((image) => { %>
     <a href="#"><img src="<%= image.url %>"></a>
  <% }) %>
</div>

<button id="add-image-button">Add Image Choice</button>

然后，我有一个 .js 文件，它使用包装图像的<div> 上的事件侦听器将单击的图像添加到“imageSelection”数组：

const imageContainer = document.getElementById('image-container');
const imageSelection = [];

imageContainer.addEventListener('click', (e) => {
  if (!imageSelection.includes(e.target.src)) {
    imageSelection.push(e.target.src);
  }
});

最后，当用户单击“添加图像选择”按钮时，“imageSelection”数组中的图像将通过获取请求发送到端点“http://localhost:3001/post-images”。 addImageButton 附加了一个 eventListener 来侦听“点击”事件，因此您不需要 <form> 元素：

const addImageButton = document.getElementById('add-image-button');

addImageButton.addEventListener('click', async () => {
  const url = 'http://localhost:3001/post-images';
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(imageSelection)
  });
  const myJson = await response.json();
  console.log(JSON.stringify(myJson));
});

服务器端

在 Express 方面，我为 POST /post-images 请求设置了一个路由处理程序，它只是将 POST 数据发送回请求者：

router.post('/post-images', (req, res, next) => {
  res.json(req.body);
});

因此，出于您的目的，此模式允许用户选择图像，然后单击按钮，然后将这些图像的 url 发送到服务器。如果这不是您想要的，请澄清，我会尽力提供帮助。

目前是 2019 年 11 月 16 日星期六晚上 9 点 34 分（格林威治标准时间），我正在编辑此内容，我要离开家，再过 20 小时左右将无法提供帮助，所以不要预计 2019 年 11 月 17 日星期日下午 5:30 GMT 之前得到回复。

我将我的代码推送到 git repo here，只需按照 README 中的说明进行操作，您就可以在您的机器上对其进行测试。您要为此示例特别签出的文件是：

• views/index.ejs
• public/javascripts/main.js
• 路由/index.js

这是前端的图像，在选择前两个图像后记录响应：