Bästa sättet att lagra bilder i MERN stack webbapplikation

Ett alternativ är att ladda upp bilden till Cloudinary på klientsidan och spara den returnerade URL:en till MongoDB med ditt eget API. Cloudinary gör mer än att vara värd för dina bilder men hanterar också bildmanipulering och optimering med mera.

Vad du i princip måste göra är:

1. Registrera dig för ett Cloudinary-konto
2. Gå till Inställningar -> Ladda upp
3. Lägg till en "uppladdningsförinställning" med "Osignerat läge" för att möjliggöra osignerad uppladdning till Cloudinary

Då kan din uppladdningsfunktion vara ungefär så här:

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
}