web-dev-qa-db-ja.com

FormDataを使用したJavaScript Blobアップロード

JavaScriptで作成したblobをサーバーにアップロードするときに問題が発生します。基本的な考え方は、ユーザーが画像をアップロードし、JavaScriptで画像を中央クロップして、送信前にダウンサンプリングすることです。

画像操作は正常に機能していますが、アップロード自体は正しく機能していません。これがアップロードとキャンバスからブロブへの変換を行うコードです

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

サーバーはファイルがアップロードされなかったと主張し、chromeを使用してリクエストを調べると、リクエストのペイロードは次のようになります。

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

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

_input type="file"_で送信されるフォームのペイロードとは対照的

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


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--
_

したがって、XMLHttpRequestがblob.toString()を呼び出した結果をアップロードしているように見えます

私がここで間違っていることを誰かが知っていますか？私が使用すべきより良いアプローチはありますか？

ajaxhtmlfile-uploadxmlhttprequestmultipartform-data
27
Max Ehrlich

関数uploadCanvasDataにタイプミスがあります。

formData.append("file", blob);

コードをもっと注意深く読んでください！

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

xmlhttpRequestを作成する

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

次に、これを簡単に行います

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

私はあなたがあなた自身を作成し​​、その関数を呼び出す関数でこれらすべてを行うことを願っています

0
Ir Calif