2012-09-20 22 views
7

मेरी बड़ी समस्या यह है कि मैं सीओआरएस के माध्यम से छवियों को अपने एस 3 बाल्टी में अपलोड करने की अनुमति देने के लिए HTML5 ड्रैग और ड्रॉप का उपयोग करना चाहता हूं। मैं एस 3 में कुछ प्राप्त करने में सक्षम हूं, लेकिन यह हमेशा 6464 एन्कोडेड सामग्री के रूप में दिखाई देता है।आप अपलोड करने के लिए फॉर्म डेटा में फ़ाइल रीडर ऑब्जेक्ट में डेटा का अनुवाद कैसे करते हैं?

myFileReader.readAsArrayBuffer(f); 
//[...] 

function on_onload(file_name, file_type, file_data) { 
    // file_name and file_type are bound to the function via a closure, 
    // file_data is passed in during the actual callback invocation. 
    var xhr = new XMLHttpRequest(); 
    var fd = new FormData(); 
    // code that sets AWS credentials for fd omitted 

    // _arrayBufferToBase64() just does a binary to base64 conversion 
    // as described in https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string 
    fd.append('file', _arrayBufferToBase64(file_data)); 

    xhr.open('POST', my_aws_bucket_endpoint, true); 
    xhr.send(fd); 
} 

_arrayBufferToBase64()this answer से सिर्फ looped कोड है।

foo.jpg अपलोड करने का प्रयास करने के बाद:

$ wget [my_uri]/foo.jpg 
[...] 
HTTP request sent, awaiting response... 200 OK 
Length: 295872 (289K) [image/jpeg] 
Saving to: 'foo.jpg' 

$ file foo.jpg 
foo.jpg: ASCII text, with very long lines, with no line terminators 

$ head -c 20 foo.jpg 
/9j/4AAQSkZJRgABAQEA 

मैं this answer में वर्णित के रूप readAsBinaryString() का उपयोग करें, और उसके बाद 'file' कुंजी को लौट डेटा आवंटित करने के लिए प्रयास करते हैं तो कोई डेटा नहीं भेजा जाता है और मैं एक शून्य के साथ खत्म मेरी एस 3 बाल्टी में लम्बाई फ़ाइल।

उत्तर

7

मेरे अपने प्रश्न का उत्तर देना:

ऐसा लगता है कि आप बिल्कुल एक FileReader उपयोग करने के लिए नहीं जरूरत करना File ऑब्जेक्ट जो DataTransfer ईवेंट से आता है FormData के साथ पहले से संगत है।

एक example is available here

एस 3 में अपनी फाइलें अपलोड करने के लिए आपको बस इतना करना है कि XMLHttpRequest को एस 3 पर लात मारने से पहले अपने FormData में अपने प्रमाण-पत्र और हस्ताक्षर सेट करके उदाहरण को संशोधित करें।