Beste Möglichkeit, Bilder in der MERN-Stack-Webanwendung zu speichern

Eine Option besteht darin, das Bild auf Cloudinary hochzuladen auf der Clientseite und speichern Sie die zurückgegebene URL in MongoDB mit Ihrer eigenen API. Cloudinary bietet mehr als nur das Hosten Ihrer Bilder, sondern kümmert sich auch um Bildbearbeitung und -optimierung und mehr.

Grundsätzlich müssen Sie Folgendes tun:

1. Melden Sie sich für ein Cloudinary-Konto an
2. Gehen Sie zu Einstellungen -> Hochladen
3. Fügen Sie eine „Upload-Voreinstellung“ mit dem „Unsigned-Modus“ hinzu, um unsigniertes Hochladen auf Cloudinary zu ermöglichen

Dann könnte Ihre Upload-Funktion etwa so aussehen:

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
}