No estoy muy seguro de entender su pregunta, pero veamos si puedo ayudar con lo que creo que sé. Creo que debe poder seleccionar algunas imágenes que se procesan a través de un archivo .ejs, almacenar las URL de la imagen en una matriz a través de JS del lado del cliente, luego enviar esa matriz en una solicitud POST a un servidor Express.
Así es como lo haría, usando su código como base:
Lado del cliente
Creé un archivo .ejs que mostraba algunas imágenes que mi servidor Express enviaba en una variable local de 'imágenes':
<div id="image-container">
<% images.forEach((image) => { %>
<a href="#"><img src="<%= image.url %>"></a>
<% }) %>
</div>
<button id="add-image-button">Add Image Choice</button>
Luego, tengo un archivo .js que agrega imágenes en las que se hace clic en una matriz 'imageSelection' usando un detector de eventos en el <div> que envuelve las imágenes:
const imageContainer = document.getElementById('image-container');
const imageSelection = [];
imageContainer.addEventListener('click', (e) => {
if (!imageSelection.includes(e.target.src)) {
imageSelection.push(e.target.src);
}
});
Y finalmente, cuando el usuario hace clic en el botón 'Agregar opción de imagen', las imágenes en la matriz 'imageSelection' se envían a través de una solicitud de búsqueda al punto final 'http://localhost:3001/post-imágenes
'. El addImageButton tiene un eventListener adjunto que escucha el evento 'clic', por lo que no necesita un <form> elemento:
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));
});
Lado del servidor
En el lado Express, tengo una configuración de controlador de ruta para la solicitud POST/post-images que simplemente devuelve los datos POST-ed al solicitante:
router.post('/post-images', (req, res, next) => {
res.json(req.body);
});
Entonces, para sus propósitos, este patrón le permite al usuario seleccionar imágenes y luego hacer clic en un botón y las direcciones URL de esas imágenes se envían al servidor. Si no es eso lo que buscas, aclara e intentaré ayudarte.
Actualmente es sábado, 16-11-2019 a las 9:34 p. respuesta antes de las 17:30 GMT del domingo 17-11-2019.
Subí mi código a un repositorio git aquí , simplemente siga las instrucciones en el LÉAME y debería poder probarlo en su máquina. Los archivos que desea consultar específicamente para este ejemplo son:
- vistas/index.ejs
- público/javascripts/main.js
- rutas/index.js
Aquí hay una imagen del front-end, con la respuesta registrada después de seleccionar las dos primeras imágenes:
