2

设想:

开发网站的博客功能(angular + firebase + Aws S3 + ng-file-upload

将图像上传到 S3 进行存储并将 url 存储在 firebase 中,以便在呈现博客文章时调用

问题 -

  • 403 错误访问被拒绝上传-当请求标头中的 acl 为“公共读取”时
  • “私人”作品 - 意味着他们上传但不在页面上呈现

(* 但是手动更改图像以在 Aws S3 存储桶中公开图像在博客中呈现*) - 绕圈子试图找出问题所在

这是代码

// 政策文件

 $scope.policy = {
"expiration": "2020-01-01T00:00:00Z",
"conditions": [
  {"bucket": "my-bucket-name"},
  ["starts-with", "$key", ""],
  {"acl": 'public-read'},
  {"success_action_redirect":"#"},
  ["starts-with", "$Content-Type", ""],
  ["starts-with", "$filename", ""],
  ["content-length-range", 0, 524288000]
  ]
};

// Upload method and parameters

Upload.upload({
  url: 'https://my-bucket-name.s3.amazonaws.com/',
  method: 'POST',
  fields: {
    key: file.name,
    AWSAccessKeyId: 'MY-ACCESS-KEY,
    acl: 'public-read',
    success_action_redirect: "#",
    policy: myPolicy, // Base64 encoded
    signature: mySignature,
    "Content-Type": file.type != '' ? file.type : 'application/octet-stream',
    filename: file.name
  },
  file: file
})

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

// Bucket Policy
{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "UploadFile",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::MY-ID:user/MY-USERNAME"
        },
        "Action": [
            "s3:GetObject",
            "s3:PutObject"
        ],
        "Resource": "arn:aws:s3:::my-bucket-name/*"
    },
    {
        "Sid": "crossdomainAccess",
        "Effect": "Allow",
        "Principal": "*",    // there is asterik here just not showing up in this comment 
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::my-bucket-name/crossdomain.xml"
    }
]
}
4

1 回答 1

-1

我也在寻找使用 firebase 上传/显示图像的解决方案。我听说离子是一个不错的选择,你觉得呢?

于 2015-08-16T07:57:15.167 回答