Il modo migliore per archiviare le immagini nell'applicazione Web stack MERN

Un'opzione è caricare l'immagine su Cloudinary sul lato client e salva l'URL restituito su MongoDB con la tua API. Cloudinary fa molto di più che ospitare le tue immagini, ma gestisce anche la manipolazione e l'ottimizzazione delle immagini e altro ancora.

Fondamentalmente quello che dovrai fare è:

1. Registrati per un account Cloudinary
2. Vai su Impostazioni -> Carica
3. Aggiungi una "preimpostazione di caricamento" con "Modalità non firmata" per abilitare il caricamento non firmato su Cloudinary

Quindi la tua funzione di caricamento può essere qualcosa del genere:

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
}