9

私のより大きな問題は、HTML5ドラッグアンドドロップを使用して、CORS経由でS3バケットに画像をアップロードできるようにしたいことです。S3に何かを入れることはできますが、それは常に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()この回答からのループコードです。

アップロードを試みた後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

この回答readAsBinaryString()で説明されているように使用しようとして、返されたデータをキーに割り当てると、データが送信されず、S3バケットに長さがゼロのファイルが作成されます。'file'

4

1 に答える 1

8

私自身の質問に答える：

を使用する必要はまったくないことがわかりましたFileReader。イベントからのFileオブジェクトDataTransferは、すでにと互換性がありFormDataます。

例はここにあります。

ファイルをS3にアップロードするために必要なのは、S3FormDataにキックオフする前に、クレデンシャルと署名を設定してその例を変更することだけXMLHttpRequestです。

于 2012-09-24T23:31:51.077 に答える