Làm thế nào để bạn dịch dữ liệu trong đối tượng FileReader thành dữ liệu biểu mẫu để tải lên?

Question

Vấn đề lớn hơn của tôi là tôi muốn sử dụng tính năng Kéo và Thả HTML5 để cho phép tải hình ảnh lên thùng S3 của tôi qua CORS. Tôi có thể nhận được một cái gì đó vào S3, nhưng nó luôn luôn kết thúc như những gì dường như là nội dung mã hóa 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() chỉ là mã được lặp lại từ this answer.

Sau khi cố gắng để tải lên 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 

Nếu tôi cố gắng sử dụng readAsBinaryString() như mô tả trong this answer, và sau đó gán dữ liệu trả về để chìa khóa 'file', không có dữ liệu được gửi và tôi kết thúc với một số không -tập tin dài trong thùng S3 của tôi.

Answer 1

Trả lời câu hỏi của riêng tôi:

Nó chỉ ra rằng bạn không nhu cầu sử dụng một FileReader ở tất cả. Đối tượng File xuất phát từ sự kiện DataTransfer đã tương thích với FormData.

An example is available here.

Tất cả những gì bạn cần làm để tải tệp lên S3 là sửa đổi ví dụ đó bằng cách đặt thông tin xác thực và chữ ký của bạn trong FormData trước khi khởi động XMLHttpRequest đến S3.