JavaScript：在 S3 存储桶中为应用程序托管用户图像

Question

“背景”深入概述了问题 - 我添加它是为了使这个问题成为使用 S3 托管图像（如个人资料图像）的良好指南

您可以直接跳到“我遇到麻烦”以直接提供帮助。

----------------------------------------------- 背景------------------------------------------ ---------------------- 注意：请随意批评我对如何为未来的读者正确托管图片的假设。

因此，对于快速原型，我将用户头像图像托管在 AWS S3 存储桶中，但 我想大致模拟它在生产中的完成方式。

以下是我对如何为行业标准图像托管建模的 3 个假设。（基于我研究过的非网站）：

1. 阅读 - 您可以使用公共端点（无需令牌）

2. 保护阅读访问权限 - 使用散列来存储资源（图像）。应用程序会将散列后的 URL 提供给具有访问权限的用户。

   例如 2 个哈希值（1 个用于文件路径，1 个用于图像）： https://myapp.com/images/1024523452345233232000/f567457645674242455c32cbc7.jpg

   ^上述可以通过 S3 使用散列的“前缀”和散列的文件名来完成。

3. 写入权限 - 用户应登录应用并获得临时凭据以写入存储（即添加图像）。

所以有了这 3 个假设，这就是我正在做的事情和问题：

（简单的编写 - 使用凭据）

<script type="text/javascript">
  AWS.config.credentials = ...;
  AWS.config.region = 'us-west-2';
  var bucket = new AWS.S3({params: {Bucket: 'myBucket'}});
  ...
  var params = {Key: file.name, ContentType: file.type, Body: file};
      bucket.upload(params, function (err, data) {
        //Do Something Amazing!!
  });
</script>

---------------------------------我遇到了麻烦- -------------------------------------------------- --------(A Simple Read -Give The User a Signed URL) Error 403 Permissions

<script type="text/javascript">
      AWS.config.credentials..
      AWS.config.region = 'us-west-2';
      var s3 = new AWS.S3();
      var params = {Bucket: 'myBucket', Key: 'myKey.jpg'};
      document.addEventListener('DOMContentLoaded', function () {
          s3.getSignedUrl('getObject', params, function (err, url) {
            // Getting a 403 Permissions Error!!!
          });
      });
</script>

我认为不需要签名的 URL，但我认为它可以解决权限错误，但 我必须手动将权限设置为公开才能读取图像。

问题：

• 那么我应该如何让那些已经获得 URL 访问权限的端点完全公开（可读），但只有在用户拥有凭据时才可写？

Answer 1

要在上传对象时使其可公开下载，请将名为“public-read”的预制（预定义）ACL 与 putObject 请求一起应用。

var params = {
  Key: file.name, 
  ContentType: file.type, 
  Body: file,
  ACL: 'public-read'
};

http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property