JavaScript Blob hochladen mit Formdata

Question

Ich habe ein Problem, einen Klecks in Javascript zu meinem Server erstellt zu. Die Grundidee ist, dass ein Benutzer ein Bild hochlädt und in Javascript zentriere ich das Bild und verkleinere es vor der Übertragung.

Die Bildmanipulation funktioniert gut, aber der Upload selbst nicht richtig funktioniert. Hier ist der Code, den Upload und Konvertierung von der Leinwand tut blob

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 behauptet, dass keine Dateien hochgeladen wurden, und wenn ich Chrom verwenden, um die Anfrage zu prüfen, sehe ich die Anfrage Nutzlast:

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

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

im Gegensatz zur Nutzlast einer Form mit input type="file"

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


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ-- 

abgegeben wird, so sieht es für mich wie das XMLHttpRequest nur ist das Ergebnis der Upload cal blob.toString() ling

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

Answer 1

Sie haben einen Tippfehler in der Funktion uploadCanvasData es

formData.append("file", blob); 

Lesen Sie Ihren Code sorgfältig lesen sollten!

Answer 2

function dataURItoBlob(dataURI) { 
// convert base64/URLEncoded data component to raw binary data held in a string 
var byteString; 
if (dataURI.split(',')[0].indexOf('base64') >= 0) 
    byteString = atob(dataURI.split(',')[1]); 
else 
    byteString = unescape(dataURI.split(',')[1]); 

// separate out the mime component 
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

// write the bytes of the string to a typed array 
var ia = new Uint8Array(byteString.length); 
for (var i = 0; i < byteString.length; i++) { 
    ia[i] = byteString.charCodeAt(i); 
} 

return new Blob([ia], {type:mimeString}); 
} 

erstellen ein XMLHttpRequest

let uriPost ="active.php"; 
let xhrPost =new XMLHttpRequest(); 

dann dies tun es einfach

var dataURL = canvas.toDataURL('image/jpeg', 0.5); 
var blob = dataURItoBlob(dataURL); 
var fd = new FormData(document.forms[0]); 
fd.append("canvasImage", blob); 

Ich hoffe you'l tun dies alles in einer Funktion, die Sie selbst erstellen wird dann die Funktion aufrufen