Bedste måde at gemme billeder i MERN stack webapplikation

En mulighed er at uploade billedet til Cloudinary i klientsiden og gem den returnerede URL til MongoDB med din egen API. Cloudinary gør mere end at hoste dine billeder, men håndterer også billedmanipulation og -optimering med mere.

Dybest set, hvad du skal gøre er:

1. Tilmeld dig en Cloudinary-konto
2. Gå til Indstillinger -> Upload
3. Tilføj en "upload-forudindstilling" med 'Usigneret tilstand' for at aktivere usigneret upload til Cloudinary

Så kan din uploadfunktion være sådan her:

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
}