Wie base64 Bild über Ajax senden

Ich bin T-Shirt Konstruktor entwickeln. Wenn ich Base64-Daten (canvas.toDataUrl()) über AJAX-POST-Methode an Server senden, erhalte ich Base64-Zeichenfolge mit Leerzeichen.Wie base64 Bild über Ajax senden

Für exmaple:

Senden:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhsAAAIbCAYAAABCJ1y9AAAgAElEQVR4Xuy9CbCmVXkuur7pn/bcczd00w2INAhBmdQ4EDNpHEi8gVMQcyKpc3NOck3lOKRyokmFUzmHSupgLG9MTFKpeK

Get:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhsAA 
AIbCAYAAABCJ1y9AAAgAElEQVR4Xuy9CbCmVXkuur7pn/b 
cczd00w2INAhBmdQ4EDNpHEi8gVMQcyKpc3 NOck3lOKRyokmFUzmH SupgLG9MT FKpeK

JS-Code:

var data = csrfParam + '=' + csrfToken + '&front_base64=' + frontImage 
    + '&back_base64=' + backImage + '&product_id=' + currentProduct['id'] 
    + '&color_id=' + currentProductColorId + '&size_id=' + 
    currentProductSize; 
var xhr = new XMLHttpRequest(); 
xhr.open('POST', '/constructor/add-to-cart/', true); 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
xhr.send(data); 
xhr.onload = function() {console.log(xhr.responseText)}

white spacing screenshot

Quelle

2017-06-16 Степан Куштуев

Sind die Leerzeichen in den Anforderungsdaten enthalten? Wenn Sie unter der Konsole der Entwicklerkonsole-> Netzwerk gehen und sich die Anfrage ansehen, werden die Leerzeichen dort angezeigt? Wenn ja, dann ist das ein Problem, wenn JavaScript sie hinzufügt, nicht PHP. Sie könnten auch 'encodeURIComponent()' um Ihre Variablen herum verwenden, um sicherzustellen, dass URL-Entities richtig in ihre URL-Escape-Werte konvertiert werden (zB% 20 für Leerzeichen). Wenn Sie die Leerzeichen immer noch sehen, müssten Sie mehr Code bereitstellen, denn das, was hier gezeigt wird, würde das nicht tun. –

'encodeURIComponent()' konvertiert keine maskierten URL-Werte. Aber wenn ich front_base64 in die txt-Datei im Server schreibe, sehe ich Leerzeichen –

Verwendung jquery ajax es wird Ihr Leben viel einfacher machen und das Problem wird auch gelöst werden:

$.post('/constructor/add-to-cart/',{ 
     csrfParam : csrfToken, 
     front_base64: frontImage, 
     back_base64 : backImage, 
     product_id : currentProduct['id'], 
     color_id : currentProductColorId, 
     size_id : currentProductSize 
    },function(response){ 
    console.log(response) 
    });

und wenn Sie das base64 Bild in Backend anzeigen möchten überprüfen, ob es ok

<img src="/* base 64 string here */" />

anstatt nur die Zeichenfolge anzuzeigen.

Quelle

2017-06-17 10:29:25

Dieser Code löste das Problem nicht –

Ich habe mein Problem verstanden, ich muss encodeURIComponent() um base64 hinzufügen. Danke Jonathan Kuhn für Hilfe!

Quelle

2017-06-17 21:08:51

Wie base64 Bild über Ajax senden

Antwort

Verwandte Themen