JavaScript Blob Upload with FormData

Question

javascriptで作成したBLOBをサーバーにアップロードする際に問題が発生しました。基本的な考え方は、ユーザーが画像をアップロードし、JavaScriptのIで画像を切り抜き、送信前にダウンサンプリングすることです。

画像の操作は正常ですが、アップロード自体は正しく機能していません。

：ここではキャンバスからアップロードと変換を行うコードは、サーバが何のファイルがアップロードされなかったと主張し、私は、要求を検討するためにクロムを使用する場合、私のように要求ペイロードを参照してください

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

BLOBにありますXMLHttpRequestのがちょうどCALの結果をアップロードしているようなので、それは私には見えますinput type="file"

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


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ-- 

に提出されたフォームのペイロードとは対照的に

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

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

ling blob.toString()

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

Answer 1

あなたはそれが

formData.append("file", blob); 

はより慎重にあなたのコードを読んで読むべき機能uploadCanvasDataのタイプミスを持っています！

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

のXMLHttpRequest

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

を作成し、その後、これを行うこと、私はyou'lあなたは、その関数を呼び出すあなたの自己を作成する機能で、すべてこれを行う願って簡単

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