浏览器直接上传到 Amazon S3答案

【问题标题】：Direct browser upload to Amazon S3浏览器直接上传到 Amazon S3
【发布时间】：2013-09-06 13:19:41
【问题描述】：

我试图弄清楚如何使用 XHR 将浏览器直接上传到 Amazon S3。我正在使用一些预制代码来创建签名并执行上传。我所要做的就是输入我的 S3 安全凭证。（对于它的价值，我想使用 PHP 进行策略签名）。

我已将代码 fork 到我的 GitHub 帐户，你可以在这里找到它：https://github.com/keonr/direct-browser-s3-upload-example

正如自述文件所示，我已将我的 S3 存储桶 CORS 设置为允许所有来源，例如：

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>x-amz-acl</AllowedHeader>
        <AllowedHeader>origin</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

现在，当我尝试执行文件上传时，脚本返回 XHR Error 并且我的浏览器的错误控制台给了我一个标准的 CORS 错误，说我的 Origin 现在允许该 XHR 请求。我已经尝试了我能想到的一切。我已将* 通配符更改为请求源自的实际域，以允许* 通配符允许标头。似乎没有任何效果。它继续产生那个 CORS 错误。

任何人都可以帮助我完成这项工作并成功完成将浏览器直接上传到 S3 吗？我不在乎通过哪种方式，我只需要能够完成它。另外，请记住，我是 S3 的新手，所以说明越明确越好。

谢谢！

【问题讨论】：

如果您正在寻找一个包罗万象的现成解决方案，那么我建议您查看我维护的库：Fine Uploader。 Fine Uploader 有一个 S3 模块，可以在所有浏览器中为您直接上传文件到 S3。它还支持分块、自动恢复、重试、通过粘贴 (chrome) 上传和许多其他功能。您可以在我链接到的主页上尝试现场演示，还可以查看博客文章，其中详细介绍了您需要了解的有关集成此功能的所有信息，即使您是 AWS/S3 的新手。

标签： php file-upload amazon-web-services amazon-s3 cors

【解决方案1】：

尝试为 AllowedHeader 添加通配符并允许所有方法，如下所示：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

直接上传到 Amazon S3 的最佳起点是：

对于js： http://www.designedbyaturtle.co.uk/2013/direct-upload-to-s3-with-a-little-help-from-jquery/

对于 php： http://birkoff.net/blog/post-files-directly-to-s3-with-php/

或者，如果您正在寻找开箱即用的解决方案，请查看 Plupload

希望这能让你开始！

【讨论】：