使用 Meteor、jQuery 和 AWS 开发工具包将浏览器直接上传到 S3答案

【问题标题】：Direct Browser Upload to S3 with Meteor, jQuery and the AWS SDK使用 Meteor、jQuery 和 AWS 开发工具包将浏览器直接上传到 S3
【发布时间】：2013-11-06 09:45:46
【问题描述】：

我已经了解了该主题的几乎所有资源，但仍然需要您的帮助才能完成这项工作。我想直接从 Meteor 应用程序中的浏览器直接将文件上传到我的 S3。为此，我向客户端提供了一个签名的 url，就像在这个简化的示例中一样：

Meteor.methods({
    requestUpload: function(filename) {
        var fut = new Future();
        new Fiber(function() {
            var params = {
                Bucket: MY_BUCKET,
                Key: new Date().getTime() + "_" + filename
            };
            var surl = s3.getSignedUrl('putObject', params, function(err, surl) {
                if (!err) {
                    console.log("signed url: " + surl);
                    fut.return(data);
                } else {
                    console.log("Error signing url " + err);
                    fut.return();
                }
            });
        }).run();
        return fut.wait();
    }
}

客户端然后调用这个方法，得到签名后的url，如下所示

https://mybucket.s3-eu-west-1.amazonaws.com/1382890365957_myfile.png?AWSAccessKeyId=AKBLABLA&Expires=1382891265&Signature=BLABLA

并尝试使用 jQuery 像在这个 sn-p 中一样通过 POST 请求上传文件：

Template.form.events({
    'submit form': function(e, t) {
        e.preventDefault();
        var fileInput = t.find("input[type=file]");
        for (var i = 0; i < fileInput.files.length; i++) {
            var file = fileInput.files[i];
            Meteor.call("requestUpload", file.name, function(err, surl) {
                if (!err) {
                    console.log("signed url: " + surl);
                    var reader = new FileReader();
                    reader.onload = function(event) {

                    // Here I am trying to upload, it fails
                        $.post(surl, reader.result, function(data, status) {
                            console.log("status: " + status);
                            console.log("data: " + data);
                        });
                    };
                    reader.readAsDataURL(file);
                } else {
                    console.log(err);
                }
            });
        }
    }
});

我想使用 jQuery，因为我认为它可能是涵盖许多浏览器和浏览器版本的好方法。我还检查了这个特定存储桶的 CORS 配置，如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

确保我在服务器上配置我的 SDK 的凭据没有问题，它们具有管理员权限，我一直在使用它们从服务器在 S3 中放置和获取对象。此外，如果我为私有文件上的 GET 调用签名 url，则签名的 url 是有效的。我可能在发帖时做错了什么。

非常感谢任何帮助！

【问题讨论】：

标签： jquery file-upload amazon-s3 meteor

【解决方案1】：

为了让这个工作，我必须在s3.getSignedUrl 调用中添加几个参数：

ContentType: mimeType,
Body: '',
"ACL": 'public-read'

完整方法：

Meteor.methods({
    requestUpload: function(filename, mimeType) {
        var fut = new Future();
        new Fiber(function() {
            var params = {
                Bucket: MY_BUCKET,
                Key: new Date().getTime() + "_" + filename,
                ContentType: mimeType,
                Body: '',
                "ACL": 'public-read'
            };
            var surl = s3.getSignedUrl('putObject', params, function(err, surl) {
                if (!err) {
                    console.log("signed url: " + surl);
                    fut.return(surl);
                } else {
                    console.log("Error signing url " + err);
                    fut.return();
                }
            });
        }).run();
        return fut.wait();
    }
}

【讨论】：

【解决方案2】：

同样的问题 - 我认为这是因为 Meteor 不允许在应用程序标头中使用 CORS。我也在努力解决这个问题。

【讨论】：

【解决方案3】：

问题可能是您为 PUT 请求请求 SignedUrl，但您稍后将文件发布到 S3。您应该将文件放到 S3 而不是 POST。

SignedUrls 目前只允许 GET 和 PUT。

有关更多信息，请参阅此答案：upload-file-from-angularjs-directly-to-amazon-s3-using-signed-url

【讨论】：