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

回答我自己的问题：

事实证明，您根本不需要使用 a FileReader。File来自事件的对象DataTransfer已经与FormData.

此处提供了一个示例。

将文件上传到 S3 所需要做的就是在启动到 S3FormData之前通过在您的凭据和签名中设置您的凭据和签名来修改该示例XMLHttpRequest。

于 2012-09-24T23:31:51.077 回答