Ich habe ein Problem beim Hochladen eines mit Javascript erstellten Blobs auf meinen Server. Die Grundidee ist, dass ein Benutzer ein Bild hochlädt und in Javascript das Bild in der Mitte zuschneidet und es vor der Übertragung herunterzählt.

Die Bildbearbeitung funktioniert einwandfrei, aber der Upload selbst funktioniert nicht richtig. Hier ist der Code, der den Upload und die Konvertierung von Canvas in Blob vornimmt

function uploadCanvasData()
{
    var canvas = $('#ImageDisplay').get(0);
    var dataUrl = canvas.toDataURL("image/jpeg");

    var blob = dataURItoBlob(dataUrl);

    var formData = new FormData();
    formData.append("file", formData);

    var request = new XMLHttpRequest();
    request.onload = completeRequest;

    request.open("POST", "IdentifyFood");
    request.send(formData);
}

function dataURItoBlob(dataURI)
{
    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++)
    {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new Blob([ab], { "type": mimeString });
    return bb;
}

Der Server gibt an, dass keine Dateien hochgeladen wurden. Wenn ich die Anforderung mit Chrome überprüfe, wird die Anforderungsnutzlast folgendermaßen angezeigt:

------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"

[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--

Im Gegensatz zur Nutzlast eines Formulars, mit dem gesendet wirdinput type="file"

------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--

Für mich sieht es also so aus, als ob XMLHttpRequest nur das Ergebnis des Aufrufs hochlädtblob.toString()

Weiß jemand, was ich hier falsch mache? Gibt es einen besseren Ansatz, den ich verwenden sollte?