ruby-on-rails - HTML5 亚马逊 S3 直接上传

Question

我正在寻找一个 HTML 5 AJAX 库/框架，供用户将文件直接上传到 Amazon S3。目标是避免将附件上传到网络服务器(因为网络服务器在将附件传输到亚马逊时会阻止)。我的理解是，这应该可以使用 XDomainRequest，但我不知道如何实现。

我正在运行 ruby​​-on-rails 并想为上传的文件分配一个临时名称(使用 UUID)，该名称将被发回 Web 服务器，以便稍后可以重命名该文件并将其与 paperclip 集成。

有什么想法吗？这是 jQuery 可以处理的吗？ Flash 不是该项目的选项。谢谢!

编辑:

我设法让基本的帖子正常工作，但仍有问题。我不确定需要哪些 header ，或者如何在请求中对亚马逊所需的参数进行编码(我可以将它们放在请求 header 中吗？)。这是我到目前为止的进展:

const XMLHTTPFactories = [
  function () { return new XDomainRequest(); },
  function () { return new XMLHttpRequest(); },
  function () { return new ActiveXObject("Msxml2.XMLHTTP"); },
  function () { return new ActiveXObject("Msxml3.XMLHTTP"); },
  function () { return new ActiveXObject("Microsoft.XMLHTTP"); },
];

var xhr = null;

for (var i = 0; i < XMLHttpFactories.length; i++) {
    try { xhr = XMLHttpFactories[i](); break; } catch (exception) { continue; }
}

$(this).change(function () {

  for (var i = 0; i < this.files.length; i++) {
    var file = this.files[i];

    xhr.open(settings.method, settings.url, true);
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("Access-Control-Allow-Origin", "*")
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("X-File-Name", file.fileName);
    xhr.setRequestHeader("X-File-Size", file.fileSize);

    xhr.send(file);
  }

编辑:

进一步更新后，我设法得到以下错误:

XMLHttpRequest cannot load http://bucket.s3.amazonaws.com/. Origin http://local.app is not allowed by Access-Control-Allow-Origin.

我已经上传了一个允许从通配符 (*) 域进行访问的 crossdomain.xml 文件。不确定如何继续...

编辑:

在做了更多调查之后，我开始认为 JavaScript POST 可能无法用于 S3。在进行传输之前，我是否需要发布到 EC2 实例？我也许能够保护一个微型实例，但如果可能的话，我更愿意直接转到 S3!谢谢!

编辑:

我在亚马逊论坛上发布了这个问题，但没有收到任何反馈。对于交叉引用，可以在此处找到另一篇文章:https://forums.aws.amazon.com/message.jspa?messageID=206650#206650 .

Answer 1

你需要做对方issue an Access-Control-Allow-Origin header .在你的情况下，另一端是 Amazon S3 服务器。除非他们在该 header 中提及您的域，否则您将无法向他们发出任何跨站点请求。

Amazon S3 now supports Cross Origin Resource Sharing您可以通过向存储桶添加一个或多个 CORS 规则来配置任何 S3 存储桶以进行跨域访问。每个规则都可以指定一个应该有权访问您的存储桶的域和一组您希望允许的 HTTP 动词。