Speichern Sie Image-Datei in Binärdaten in Mungo-Schema und zeigen Sie Bild in HTML-Formular an

Question

Ich verwende Express, Node.js und Mongodb, um die Webseite zu erstellen, die die Bilddatei hochlädt und anzeigt.

Ich speicherte die Binärdatei in Mongodb mit Schema.

Hier ist mein kleines Stück Code in index.js und db.js ..

var Post = mongoose.Schema({ 
    image: {data: Buffer, contentType: String} 
}); 

var post= new Post({ }); 
post.image.data=fs.readFileSync(req.file.path); 
post.image.contentType='image/png'; 

und hier der Teil des Mongo Shell ist, nachdem ich Bilddatei vorgelegt und für die Zeit nach durchsucht, und seinem Bildfeld

"image:  {"data:BinData(0,"iVBORw0KGgoAAAANSUhEUE....(I 
just cut off the rest of the code.. cuz it was too long)   
rkJggg=="), 
"contentType" : "image/png" } 

so schien es, wie es erfolgreich die binären Daten der Bilddatei in mogngodb Speicher ist,

aber mein Problem ist, wie das Bild angezeigt werden auf der Webseite, die jetzt binäre Daten verwendet. Wie konvertiere ich binäre Pufferdaten, um Image-Tags zu erstellen?

<img src= "data:{{image.contentType}};base64,{{image.data}}"> 

Ich versuchte dies, aber es gibt mir eine Fehlermeldung:

Failed to load resource: net::ERR_INVALID_URL 

Könnten Sie Jungs lassen Sie es mich wissen, wie kann ich dieses Problem lösen ?? Ich werde wirklich für Ihre Hilfe zu schätzen wissen: (((

Answer 1

Zunächst einmal müssen Sie Pufferdaten zu Base64 konvertieren Sie es es yourBufferData.toString('base64') spielt keine Rolle, verwenden in Back-End-oder Front-End tun einfach... Dann können Sie es verwenden.

Allerdings würde ich eine andere Möglichkeit zum Speichern von Bildern vorschlagen, anstatt binäre Daten zu speichern.Nehmen Sie an, Sie verwenden nodejs.Sie können Bild in einem Repository mit diesen Binärdaten mit fs.writeFile Methode erstellen.Sie können dann speichern diesen Bildpfad im Datensatz (db) .Nach dem, einfach den Dateipfad in ng-src = "Dateipfad, den Sie gespeichert haben." Hier ist das Beispiel, das ich benutze:

var path = 'upload/profiles/' +req.body.userId + '_profile.jpg'; 
     fs.writeFile(path, base64data, function(err) { 
     if (err) return next(err); 
     User.findByIdAndUpdate({ 
      _id: req.body.userId 
     }, { 
      $set: { 
      profileImg: 'upload/profiles/' +req.body.userId + '_profile.jpg' 
      } 
     }, function(err, user) { 
      if (err) return next(err); 
      return res.send(user); 
     }); 
     }); 

    <img ng-src="savedpath">