जावास्क्रिप्ट ब्लॉब फॉर्मडाटा

Question

के साथ अपलोड करें मुझे अपने सर्वर पर जावास्क्रिप्ट में बनाए गए ब्लॉब को अपलोड करने में समस्या आ रही है। मूल विचार यह है कि एक उपयोगकर्ता एक छवि अपलोड करता है और जावास्क्रिप्ट में मैं छवि को फसल करता हूं और संचरण से पहले इसे घटा देता हूं।

छवि कुशलता ठीक काम कर रही है, लेकिन अपलोड स्वयं सही काम नहीं कर रहा है।

: यहाँ कोड है कि कैनवास से अपलोड और रूपांतरण करता बूँद को

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

सर्वर का दावा है कि कोई भी फ़ाइलें अपलोड किया गया, और जब मैं क्रोम का उपयोग अनुरोध की जांच करने के लिए, मैं के रूप में अनुरोध पेलोड देखना है

------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()

क्या कोई जानता है कि मैं यहां क्या गलत कर रहा हूं? क्या कोई बेहतर दृष्टिकोण है जिसका उपयोग करना चाहिए?

Answer 1

आप समारोह uploadCanvasData लिखने में कोई गलती है यह पढ़ना चाहिए

formData.append("file", blob); 

अधिक ध्यान से अपने कोड पढ़ें!

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

बनाने तो ऐसा करने के लिए यह आसान

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

मुझे आशा है कि you'l एक समारोह है कि आप अपने स्वयं पैदा करेगा तो उस समारोह फोन में यह सब