Das Bild eines Benutzers auf sein Konto hochladen. Erstellung mit Express JS?[geschlossen]

StackOverflow https://stackoverflow.com//questions/23039861

Frage

Ich bin neu bei Node Js und erstelle eine einfache App, in der der Benutzer ein Konto mit Details erstellt, und ich habe Mongodb im Backend verwendet, um die Details des Benutzers, seinen Namen, seine E-Mail-Adresse usw. zu speichern.

Nachdem ich ein Konto erstellt habe, leite ich es zur Anmeldeseite weiter, auf der sich der Benutzer anmelden muss. Bei erfolgreicher Anmeldung wird der Benutzer zum Profil weitergeleitet, wo ich gerade seinen Namen anhand von Sitzungen zeige.

Jetzt möchte ich das Bild eines Benutzers bei der Kontoerstellung hochladen und frage mich, wie ich es mit meinem Kontoerstellungsformular verknüpfen kann, wie im Screenshot gezeigt, während ich es in der Mongodb speichere.

Ich möchte das Bild dieses Benutzers als Profilbild anzeigen, wenn sich der Benutzer anmeldet und zu seiner Profilseite weitergeleitet wird.

Ich habe viele Links zum Speichern von Bildern auf MongoDB gefunden, konnte aber keine Hilfe bekommen und füge auch den Screenshot der Profilseite bei.

Wie kann ich das umsetzen?enter image description here

Profilseite

enter image description here

War es hilfreich?

Lösung

Wenn Sie Ihr Profilbild wirklich in MongoDB speichern möchten.Ich empfehle Ihnen, durchzugehen Wann sollte ich GridFS verwenden?

Und entscheiden Sie dann, wie groß das Profilbild maximal sein darf, das der Benutzer hochladen darf

MongoDB BSON Dokumente sind auf 16 MB begrenzt.Wenn also die Gesamtgröße Ihres gesamten Dokuments des Benutzers 16 MB nicht überschreitet, können Sie diese mit dem direkt in Ihrem Dokument speichern BinData Datentyp.

Bilder/Videos/PDF/Ppt/Tabellen usw. – es spielt keine Rolle, sie können auf die gleiche Weise gespeichert werden.Es liegt an Ihrer Anwendung, einen geeigneten Inhaltstyp im Header zurückzugeben, damit er in Ihrer Web-App ordnungsgemäß angezeigt wird.

Viel Spaß beim Codieren..:) :)

Aktualisieren:Dazu müssen Sie die Bilddaten wie folgt base64 kodieren:

var base64Image = new Buffer(uploadedFilesData, 'binary').toString('base64');

Bewahren Sie es dann mit Mongo's auf BinData Typ, es wird es dann als BSON-Bit-Array speichern, nicht tatsächlich speichern base64 string, damit die Größe nicht größer wird als Ihr ursprüngliches Binärbild.Und wenn Sie aus MongoDB lesen und als Bild dienen möchten, können Sie wie folgt vorgehen:

app.get('/getimage', function(req, res) {
  db.collection.find({'imgId':req.params.id}, function(err,data) {
      var base64Image = var img = new Buffer(data.imgDataField, 'base64');
      res.writeHead(200, {
        'Content-Type': 'image/jpeg',
        'Content-Length': base64Image.buffer.length
      });
      res.end(base64Image.buffer);
  }
}

Clientseite, die Sie zeigen sollten base64Image Daten etwa:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAAAVBJREFUOI2tlLFKA0EQhr+9i2J1kBDFYG91gYRA0ngpJELQ2KSwlFjYKIidlZVvIFgEXyBYaBH0ESysLATBPiRYWFgEye7eWkSimL1wyg1MM//Mx87O7ghjjCEhc5ICJQ5LRQm9/oDLqzsenl4QgAHK/ir7O5us5JatNcJ2Z73+gKOzCz6kQjguQoAxYELNwlyK89NDK9DaZrvTZTiS4LggBAYBQoDjMhxJ2p1u/DbvH59xU/MYrac0Y8Z6bJgJDaEF9FOPDdNKMev1hVrFh2XTHq9v75GwpYxnjVsH0GrW0UqhtZ52pWg16/FhjVpANu2Ngb88m/Zo1IL4MICg5FthQcmPKomGVSsFpJQopSYupaRaKUTCIr9TuZhnq76O47iTWBhqysX832EA1ze3COf78LnFDBzvRebP3BrbG2tfUx23eXKwOyvd/tH/a4nus083fKdxIODDXwAAAABJRU5ErkJggg==" />
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top