Hoe maak je een afbeeldingsselectie met ejs en express?

Ik weet niet zeker of ik je vraag begrijp, maar laten we eens kijken of ik je kan helpen met wat ik denk te weten. Ik denk dat je in staat moet zijn om enkele afbeeldingen te selecteren die worden weergegeven via een .ejs-bestand, de afbeeldings-url's in een array op te slaan via JS aan de clientzijde en die array vervolgens in een POST-verzoek naar een Express-server te sturen.

Hier is hoe ik dat zou doen, met uw code als basis:

Klantzijde

Ik heb een .ejs-bestand gemaakt dat enkele afbeeldingen weergeeft die mijn Express-server heeft verzonden in een lokale variabele '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>

Vervolgens heb ik een .js-bestand dat afbeeldingen toevoegt waarop wordt geklikt aan een 'imageSelection'-array met behulp van een gebeurtenislistener op de <div> dat de afbeeldingen omhult:

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

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

En tot slot, wanneer de gebruiker op de knop 'Afbeeldingskeuze toevoegen' klikt, worden de afbeeldingen in de 'imageSelection'-array via een ophaalverzoek verzonden naar het eindpunt 'http://localhost:3001/post-images '. Aan de addImageButton is een eventListener gekoppeld die luistert naar de 'klik'-gebeurtenis, dus u hebt geen <form> nodig element:

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));
});

Serverzijde

Aan de Express-kant heb ik een route-handlerconfiguratie voor het POST / post-images-verzoek dat eenvoudigweg de POST-ed-gegevens terugstuurt naar de aanvrager:

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

Voor uw doeleinden stelt dit patroon de gebruiker in staat om afbeeldingen te selecteren en vervolgens op een knop te klikken en de url's van die afbeeldingen worden naar de server verzonden. Als dat niet is wat je zoekt, verduidelijk dan en ik zal proberen te helpen.

Het is momenteel zaterdag 16-11-2019 om 21:34 uur GMT terwijl ik dit aan het bewerken ben, en ik ga het huis uit en kan pas over 20 uur of zo helpen, dus verwacht geen reactie voor 17:30 uur GMT op zondag 17-11-2019.

Ik heb mijn code naar een git repo gepusht hier , volg gewoon de instructies in de README en u zou het op uw computer moeten kunnen testen. De bestanden die u specifiek voor dit voorbeeld wilt uitchecken, zijn:

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

Hier is een afbeelding van de front-end, met de reactie vastgelegd na het selecteren van de eerste twee afbeeldingen: