Beste manier om afbeeldingen op te slaan in de MERN-stack-webtoepassing

Een optie is om de afbeelding te uploaden naar Cloudinary aan de clientzijde en sla de geretourneerde URL op in MongoDB met uw eigen API. Cloudinary doet meer dan het hosten van uw afbeeldingen, maar zorgt ook voor beeldmanipulatie en -optimalisatie en meer.

Wat u in principe moet doen, is:

1. Meld u aan voor een Cloudinary-account
2. Ga naar Instellingen -> Uploaden
3. Voeg een "uploadvoorinstelling" toe met 'Niet-ondertekende modus' om niet-ondertekend uploaden naar Cloudinary mogelijk te maken

Dan kan je uploadfunctie er ongeveer zo uit zien:

async function uploadImage(file) { // file from <input type="file"> 
  const data = new FormData();
  data.append("file", file);
  data.append("upload_preset", NAME_OF_UPLOAD_PRESET);

  const res = await fetch(
    `https://api.cloudinary.com/v1_1/${YOUR_ID}/image/upload`,
    {
      method: "POST",
      body: data,
    }
  );
  const img = await res.json();
  // Post `img.secure_url` to your server and save to MongoDB
}