Cara terbaik untuk menyimpan gambar di aplikasi web tumpukan MERN

Opsinya adalah mengupload gambar ke Cloudinary di sisi klien dan simpan URL yang dikembalikan ke MongoDB dengan API Anda sendiri. Cloudinary melakukan lebih dari sekadar menghosting gambar Anda, tetapi juga menangani manipulasi dan pengoptimalan gambar dan banyak lagi.

Pada dasarnya yang harus Anda lakukan adalah:

1. Daftar ke akun Cloudinary
2. Buka Setelan -> Unggah
3. Tambahkan "preset unggah" dengan 'Mode tidak ditandatangani' untuk mengaktifkan pengunggahan yang tidak ditandatangani ke Cloudinary

Maka fungsi unggah Anda bisa seperti ini:

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
}