Senden von Bild- und JSON-Daten an den Server mithilfe der Ajax POST-Anforderung?

Question

Ich möchte ein Bild der Benutzer von ihrem Rechner zusammen mit Formulardaten gesendet alle in einem JSON-Objekt verpackt und an den Server gesendet. Ich benutze Knoten für den Server. Ist es möglich, das Bild zusammen mit den anderen Formularelementen im JSON-Objekt zu platzieren und Node einzulesen?

Answer 1

Die üblichen Methoden, die ich vorfand, sind die Verwendung des Base64-String-Ansatzes: Sie kodieren Ihr Bild in eine Base64-Zeichenfolge und legen es als Teil des JSON-Objekts fest, das Sie an Ihren Server senden.

Ein anderer Ansatz scheint die Verwendung der Binärdaten in JSON zu sein, aber ich habe das vorher noch nie versucht, also nicht viele Informationen von mir.

Here's ein Codebeispiel für eine Base64-Codierung in Javascript. Suchen Sie speziell nach der folgenden Methode

function getBase64Image(imgElem) { 
// imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18" 
    var canvas = document.createElement("canvas"); 
    canvas.width = imgElem.clientWidth; 
    canvas.height = imgElem.clientHeight; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(imgElem, 0, 0); 
    var dataURL = canvas.toDataURL("image/png"); 
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

Answer 2

Es gibt eine Möglichkeit, dies zu erreichen: Verwenden Sie Bilddaten.

In Javascript, auf Client-Seite, erlaubt der FileReader Ihnen, binäre Bilddaten zu lesen und sie in eine Base64-codierte Zeichenfolge zu bekommen.

Auf Client-Seite:

var file = $('.file-upload > input')[0].files[0]; 

function upload(file) { 
    var reader = new FileReader(); 

    // when image data was read 
    reader.onload = function(event) { 
    // I usually remove the prefix to only keep data, but it depends on your server 
    var data = event.target.result.replace("data:"+ file.type +";base64,", ''); 

    // make here your ajax call 
    $.ajax({ 
     url: 'and_so_on', 
     json: { 
     data: data 
     } 
    }); 

    // read data from file 
    reader.readAsDataURL(file); 

}

Auf Server-Seite, werden Sie empfangen base64 Bild codiert, die Sie easilly in binäre mit dem Buffer Konstruktor übersetzen kann

var buffer = new Buffer(data, 'base64'); 

gewarnt dass FileReader ist not supported by all browsers