如何使用ejs进行图片选择和表达？

2024-06-03 • 问答

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

我能够使用JS将图像保存在一个数组中，并使用foreach在数据库中循环显示图像，从而使用EJS显示选项。然后，我只能弄清楚如何发布静态数据，但是这对我需要的方式不起作用，因为我想在将其字符串化后发布图像选择数组。我似乎无法使用普通JS来对存储在香草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来完成此操作吗？

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

我不太确定我是否理解您的问题，但是让我看看我是否可以帮助我解决我认为的问题。我认为您需要能够选择一些通过.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);
  }
});

最后，当用户单击“添加图像选择”按钮时，“图像选择”数组中的图像通过获取请求发送到端点“ http://localhost:3001/post-images”。 addImageButton附带有一个eventListener，用于侦听“ click”事件，因此您不需要<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之前得到答复。

我将代码推送至git repo here，只需按照自述文件中的说明进行操作，您就可以在计算机上对其进行测试。具体来说，您要在此示例中检出的文件是：

views / index.ejs
public / javascripts / main.js
routes / index.js

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

如何使用ejs进行图片选择和表达？

jining123456 回答：如何使用ejs进行图片选择和表达？

大家都在问