Najlepszy sposób na przechowywanie obrazów w aplikacji internetowej MERN stack

Opcją jest przesłanie obrazu do Cloudinary po stronie klienta i zapisz zwrócony adres URL w MongoDB za pomocą własnego API. Cloudinary to nie tylko hosting obrazów, ale także manipulacja obrazami i optymalizacja i nie tylko.

Zasadniczo, co musisz zrobić, to:

1. Załóż konto Cloudinary
2. Przejdź do Ustawienia -> Prześlij
3. Dodaj „wstępne ustawienie przesyłania” z „trybem bez podpisu”, aby umożliwić przesyłanie bez podpisu do Cloudinary

Wtedy twoja funkcja przesyłania może wyglądać mniej więcej tak:

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
}