Nejlepší způsob ukládání obrázků ve webové aplikaci MERN stack

Možnost je nahrát obrázek do Cloudinary na straně klienta a uložte vrácenou adresu URL do MongoDB s vaším vlastním API. Cloudinary dělá více než jen hostování vašich obrázků, ale také manipuluje s obrázky a optimalizuje je a další.

V podstatě to, co budete muset udělat, je:

1. Zaregistrujte si účet Cloudinary
2. Přejděte do Nastavení -> Nahrát
3. Přidejte „předvolbu nahrávání“ s „režimem bez podpisu“, abyste umožnili nahrávání bez podpisu do Cloudinary

Pak vaše funkce nahrávání může být něco takového:

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
}