JavaScript Blob Upload z FormData

Question

Mam problem z przesłaniem blobu utworzonego w javascript na mój serwer. Podstawową ideą jest to, że użytkownik przesyła obraz, a ja w javascript I wycinam obraz i zmniejszam go przed transmisją.

Obsługa zdjęć działa dobrze, ale samo przesyłanie nie działa poprawnie. Oto kod, który wykonuje przesyłanie i konwersji z płótna do 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; 
} 

Serwer twierdzi, że żadne pliki zostały przesłane, a gdy używam Chrome ropatrzyć widzę żądania ładowność jak:

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

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

W przeciwieństwie do ładowności formie składany z input type="file"

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


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ-- 

Tak to wygląda mi na to, że XMLHttpRequest jest po prostu przesłać wynik cal ling blob.toString()

Czy ktoś wie, co robię źle tutaj? Czy istnieje lepsze podejście, którego powinienem używać?

Answer 1

Masz literówkę w funkcji uploadCanvasData powinien przeczytać

formData.append("file", blob); 

Czytaj kod bardziej ostrożnie!

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

utworzyć XMLHttpRequest

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

następnie to zrobić łatwo

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

Mam nadzieję you'l to wszystko zrobić w funkcji, która będzie tworzyć swój własny następnie wywołać tę funkcję