Как сделать выделение изображений с помощью ejs и express?

Я не совсем уверен, что понимаю ваш вопрос, но давайте посмотрим, смогу ли я помочь с тем, что, как мне кажется, я знаю. Я думаю, вам нужно иметь возможность выбрать некоторые изображения, которые отображаются через файл .ejs, сохранить URL-адрес изображения в массиве через клиентский JS, а затем отправить этот массив в запросе POST на сервер Express.

Вот как я бы сделал это, взяв за основу ваш код:

Клиентская сторона

Я создал файл .ejs, который отображал некоторые изображения, которые мой сервер Express отправлял в локальной переменной images:

<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, который добавляет изображения, которые были нажаты, в массив imageSelection с помощью прослушивателя событий на <div>, который обертывает изображения:

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, который прослушивает событие '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-ed запрашивающей стороне:

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

Итак, для ваших целей этот шаблон позволяет пользователю выбирать изображения, а затем нажимать кнопку, и URL-адреса этих изображений отправляются на сервер. Если это не то, что вы ищете, уточните, и я постараюсь помочь.

Сейчас суббота, 16.11.2019, 21:34 по Гринвичу, пока я редактирую это, и я выхожу из дома и не смогу помогать еще 20 часов или около того, так что не ожидайте ответ до 17:30 по Гринвичу в воскресенье, 17.11.2019.

Я поместил свой код в репозиторий git здесь, просто следуйте инструкциям в README, и вы должен иметь возможность проверить это на вашей машине. В данном примере вы хотите проверить следующие файлы:

• просмотры / index.ejs
• общедоступные / javascripts / main.js
• маршруты / index.js

Вот изображение внешнего интерфейса с записанным ответом после выбора первых двух изображений: