Jak tłumaczyć dane w obiekcie FileReader na dane formularza do przesłania?

Question

Moim większym problemem jest to, że chcę użyć funkcji przeciągania i upuszczania HTML5, aby umożliwić przesyłanie obrazów do mojego kubełka S3 za pośrednictwem CORS. Mogę wprowadzić coś do S3, ale zawsze kończy się to, co wydaje się być zakodowaną w base64.

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() jest tylko zapętlony kod z this answer.

Po próbie przesłania 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 

Jeśli próbuję użyć readAsBinaryString() jak opisano w this answer, a następnie przypisać zwróconych danych do klucza 'file' dane nie są wysyłane i I skończyć z zerem -długość pliku w moim wiadrze S3.

Answer 1

Odpowiadając na moje własne pytanie:

Okazuje się, że ty NIE konieczność używania FileReader w ogóle. Obiekt File pochodzący ze zdarzenia DataTransfer jest już zgodny z FormData.

An example is available here.

Wszystko, co musisz zrobić, aby przesłać pliki do S3, modyfikuj ten przykład, ustawiając poświadczenia i podpis w swoim FormData przed wyrzuceniem XMLHttpRequest do S3.