JavaScript Blob Upload with FormData
j'ai un problème de téléchargement d'une goutte créé en javascript pour mon serveur. L'idée de base est qu'un utilisateur télécharge une image et dans javascript, Je centre recadrer l'image et l'échantillonner avant la transmission.
la manipulation d'image fonctionne bien, mais le téléchargement lui-même ne fonctionne pas correctement. Voici le code qui fait le téléchargement et la conversion de canvas en 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;
}
le serveur prétend qu'aucun fichier n'a été téléchargé, et quand j'utilise chrome pour examiner le demande, je vois la demande de la charge utile:
------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"
[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--
En revanche à la charge utile d'un formulaire soumis avec input type="file"
------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--
il me semble donc que XMLHttpRequest est en train de télécharger le résultat de l'appel blob.toString()
est ce que quelqu'un sait ce que je fais de mal ici? Est-il une meilleure approche que je devrais utiliser?
2 réponses
vous avez une faute de frappe dans la fonction uploadCanvasData il faut lire
formData.append("file", blob);
lisez votre code plus attentivement!
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});
}
créer une xmlhttpRequest
let uriPost ="active.php";
let xhrPost =new XMLHttpRequest();
ensuite ce faire, il est facile
var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);
j'espère que vous l faire tout cela dans une fonction qui vous permettra de créer votre auto alors appeler cette fonction