La mejor manera de almacenar imágenes en la aplicación web MERN stack

Una opción es subir la imagen a Cloudinary en el lado del cliente y guarde la URL devuelta en MongoDB con su propia API. Cloudinary hace más que alojar sus imágenes, sino que también maneja la manipulación y optimización de imágenes y más.

Básicamente lo que tendrás que hacer es:

1. Regístrese para obtener una cuenta de Cloudinary
2. Ve a Configuración -> Cargar
3. Agregue un "preajuste de carga" con "Modo sin firmar" para habilitar la carga sin firmar en Cloudinary

Entonces su función de carga puede ser algo como esto:

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
}