web-dev-qa-db-fra.com

Envoi de blob JavaScript avec FormData

Je rencontre un problème pour télécharger un blob créé en javascript sur mon serveur. L'idée de base est qu'un utilisateur télécharge une image et en javascript, je découpe l'image et la sous-échantillonne avant sa transmission.

La manipulation d'image fonctionne bien, mais le téléchargement lui-même ne fonctionne pas correctement. Voici le code qui effectue 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 affirme qu'aucun fichier n'a été téléchargé et, lorsque j'utilise chrome pour examiner la demande, la charge utile de la demande s'affiche comme suit:

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

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

Contrairement à 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--

Donc, il me semble que XMLHttpRequest télécharge simplement le résultat de l'appel de blob.toString()

Est-ce que quelqu'un sait ce que je fais mal ici? Existe-t-il une meilleure approche que je devrais utiliser?

ajaxhtml5file-uploadxmlhttprequestmultipartform-data
20
Max Ehrlich

Vous avez une faute de frappe dans la fonction uploadCanvasData il devrait lire

formData.append("file", blob);

Lisez votre code plus attentivement!

30
Max Ehrlich
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 requête xmlhttp

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

alors fais-le 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 ferez tout cela dans une fonction que vous créerez vous-même, puis appelez cette fonction

0
Ir Calif