Caricamento Blob JavaScript con FormData

Question

Sto riscontrando un problema nel caricare un BLOB creato in javascript sul mio server. L'idea di base è che un utente carichi un'immagine e in javascript I centro ritaglia l'immagine e la ritocca prima della trasmissione.

La manipolazione dell'immagine funziona correttamente, ma il caricamento non funziona correttamente. Ecco il codice che fa il caricamento e la conversione da tela per 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; 
} 

Il server sostiene che nessun file sono stati caricati, e quando uso Chrome per esaminare la richiesta, vedo la richiesta payload come:

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

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

In contrasto con il carico utile di una forma di essere presentati con input type="file"

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


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ-- 

Così sembra a me come il XMLHttpRequest è solo caricando il risultato di cal ling blob.toString()

Qualcuno sa cosa sto facendo male qui? C'è un approccio migliore che dovrei usare?

Answer 1

Hai un errore di battitura nella funzione uploadCanvasData si deve leggere

formData.append("file", blob); 

Leggi il codice più attenzione!

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}); 
} 

creare un XMLHttpRequest

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

poi fare questo facile

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

Spero you'l fare tutto questo in una funzione che si creerà la vostra auto quindi chiamare quella funzione