Wie übersetzen Sie die Daten in einem FileReader-Objekt in Formulardaten für den Upload?

Question

Mein größeres Problem ist, dass ich HTML5 Drag and Drop verwenden möchte, um Bilduploads in meinen S3-Bucket über CORS zu ermöglichen. Ich bin in der Lage, etwas in S3 zu bekommen, aber es endet immer als scheinbar base64-kodierter Inhalt.

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() ist nur der geschleiften Code von this answer.

Nach dem Versuch foo.jpg hochladen:

$ 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 

Wenn ich versuche, readAsBinaryString() zu verwenden, wie in this answer beschrieben, und weisen Sie dann die zurückgegebenen Daten mit dem 'file' Schlüssel werden keine Daten gesendet und ich am Ende mit einem Null-up Länge Datei in meinem S3-Bucket.

Answer 1

meine eigene Frage zu beantworten:

Es stellt sich heraus, dass Sie nicht brauchen eine FileReader überhaupt zu benutzen. Das Objekt File, das von einem Ereignis DataTransfer stammt, ist bereits mit FormData kompatibel.

Ein example is available here.

Alles, was Sie tun müssen, um Ihre Dateien auf S3 hochzuladen, ändern Sie dieses Beispiel, indem Sie Ihre Anmeldeinformationen und Unterschrift in Ihrem FormData setzen, bevor Sie die XMLHttpRequest auf S3 starten.