it-swarm.com.de

Laden Sie das base64-Bild mit Ajax hoch

Mein Kunde bietet dem Benutzer an, ein Bild auszuwählen, zuzuschneiden, die Größe zu ändern und es anzuzeigen (in einem <img>-DOM-Element).
Wenn das Bild in Ordnung ist, kann der Benutzer es auf den Server hochladen, damit es gespeichert werden kann.

Ich möchte den Upload dank einer Ajax-Anfrage durchführen.

Ich habe viele Beispiele im Internet gefunden, um das Originalbild hochzuladen, das vom Client-PC abgerufen wurde. Zum Beispiel:

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://Host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

Dies funktioniert einwandfrei, wenn ich beschließe, das über die Formulareingabe abgerufene Bild hochzuladen.

In meinem Fall möchte ich das modifizierte Bild hochladen (in einem <img>-Element gespeichert) anstelle des ursprünglichen Elements.
Dieses Bild wird als Base64-Bild gespeichert (Zur Information: Ich habe die Bibliothek croppie.js verwendet, um das Bild zu generieren).

Ich weiß nicht, wie ich dieses Bild mit Ajax hochladen soll.

Ich habe versucht, es als regulären Parameter hochzuladen, aber auf der Serverseite ist das img eine leere Zeichenfolge:

var url = 'http://Host.com/action/';
var data = {};
data.img = $('img#generated-image').attr('src');

$.ajax({url: url, type: "POST", data: data})
  .done(function(e){
    // Do something
  });
// RESULTS in a empty data.img on the server side.

Mein Problem ist, dass der Server eine leere Zeichenfolge hat, wenn der Parameter "img" abgerufen wird. Ich vermute, das Image ist möglicherweise zu groß, um an den Server weitergeleitet zu werden, oder andere Probleme, die ich nicht verstehe.

Ich frage mich also, was ist der der richtige Weg, um ein base64-Image an den Server zu senden mit einer Ajax-Anfrage OHNE mit einem Formular.

Danke für Ihre Hilfe.

EDIT

Scheint ein xmlHTTP POST - Parametergrößenproblem zu sein. Ich habe versucht, die Anzahl der Zeichen der Zeichenfolgendarstellung des Images zu reduzieren, und der Server kann es jetzt abrufen.

EDIT2

post_max_size ist in der Datei php.ini auf 8 MB gesetzt, wobei die Bildgröße nur 24 KB beträgt. Das Problem ist also nicht da.
Ich verwende PHP mit dem Symfony2-Framework.
Möglicherweise eine Einschränkung von Symfony2.

16
Nitseg

Schließlich entschied ich mich, das base64-Image in ein Blob zu konvertieren, damit es über eine Ajax-Anfrage mit dem formData-Objekt wie folgt gesendet werden kann: _. t Finden Sie den Grund dafür, dass der base64-Parameter nicht übertragen wird (aufgrund von Größenbeschränkungen sicher irgendwo).

Die base64ToBlob-Funktion basiert auf dieser Antwort auf eine andere Frage .

function base64ToBlob(base64, mime) 
{
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.Push(byteArray);
    }

    return new Blob(byteArrays, {type: mime});
}

Mein JS-Code:

var url = "url/action";                
var image = $('#image-id').attr('src');
var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, "");
var blob = base64ToBlob(base64ImageContent, 'image/png');                
var formData = new FormData();
formData.append('picture', blob);

$.ajax({
    url: url, 
    type: "POST", 
    cache: false,
    contentType: false,
    processData: false,
    data: formData})
        .done(function(e){
            alert('done!');
        });

In Symfony2 kann ich das Bild abrufen, dank:

$picture = $request->files->get('picture');
33
Nitseg

Nitsegs Antwort funktioniert gut. Ich wollte auch die folgenden Zeilen hinzufügen, wenn Sie in Ihrem Ajax-Aufruf das Authentifizierungstoken verwenden müssen. Sehen Sie sich zuerst die Antwort von Nitseg an, um mehr Details zu erfahren.

var formData = new FormData();
var token = "<YOUR-TOKEN-HERE>";
formData.append("uploadfile", mediaBlob);        

jQuery.ajax({
    url: url,
    type: "POST",
    cache: false,
    contentType: false,
    processData: false,
    data: formData,
    beforeSend: function (xhr){ 
        xhr.setRequestHeader("Authorization", "Bearer " + token); 
    }
})
.done((e) => {
    // It is done.
})
.fail((e) => {
    // Report that there is a problem!
}); 
1
omt66