注意：在配置“资源”下，替换您的bucketName

Question

我正在编写Angular应用的个人资料部分。此部分允许更改配置文件图片。

我有一个代表用户的用户类：

public name:string = '',
public email:string = '',
public password:string = '',
public picture:string=''

属性图片表示S3网址。在HTML中，我有一个名为model的类的实例。用于管理图片的HTML部分是：

<img [attr.src]="model.picture" alt="Smiley face" height="42" width="42">

<label class="btn btn-default">
  <input type="file" (change)="selectFile($event)">
</label>

<button class="btn btn-success" [disabled]="!selectedFiles" (click)="upload()">Upload</button>

当我显示个人资料部分时，图像显示没有问题。

单击该按钮时，将上载文件并使用新URL设置属性 model.picture ，以使标记图像自动显示新照片。这是代码：

uploadfile(file, userService: UserRegistrationService, model : UserForm){
  const bucket = new S3(
  {
    accessKeyId: 'access',
    secretAccessKey: 'secret',
    region: 'us-west-2'
  });

  const params = {
    Bucket: 'repo-bucket',
    Key: file.name,
    Body: file,
    ACL: 'public-read'
   };

   if(bucket.upload(params, function (err, data) {

     if (err) {
         console.log('There was an error uploading your file: ', err);
         return false;
     }   
      //The new URL is set to the property picture
      model.picture="https://s3-us-west-2.amazonaws.com/repo-bucket/" + file.name;

     userService.updateProfilePhoto(file.name);
     return data;
   })){
       return file.name
  }
     return null;
  }

当我点击更改照片时，文件已正确上传，但当使用新值更改属性图片时，javascript控制台会显示此错误：

GET https://s3-us-west-2.amazonaws.com/repo-bucket/http://localhost:4200/ 403 (Forbidden)

但如果按F5重新加载页面，图像会正确显示。

userService.updateProfilePhoto方法如下：

updateProfilePhoto(fileName: string){

    let cognitoUser = this.cognitoUtil.getCurrentUser();
    let urlFile = "https://s3-us-west-2.amazonaws.com/repo-bucket/" + fileName;
    cognitoUser.getSession(function (err, session) {
        if (err) {
            alert("Error");
            return;
        }        
        let attributeList = [];
        let dataPicture = {
            Name: 'picture',
            Value: urlFile
        }
        attributeList.push(new CognitoUserAttribute(dataPicture));
        cognitoUser.updateAttributes(attributeList,function(err, result) {
            if (err) {
                alert(err);
                return;
            }
            console.log('upload success');
        });
    });
}

你能帮我找一下这个问题吗？你知道是否有时间制作照片吗？

谢谢！

Answer 1

<强> Approach1：

if(bucket.upload(params, (err, data) => { <== note callback definition using arrow

    ...
    //The new URL is set to the property picture
    model.picture = "https://s3-us-west-2.amazonaws.com/repo-bucket/" + file.name;

    userService.updateProfilePhoto(file.name);
    return data;
})){
    return file.name
}

<强> Approach2：

<script type="text/preload" charset="utf-8" data-preload-id="time_zones" data-preload-secondary-id="time_zones.json?x=true">
  {"time_zones":[{"translated_name":"American Samoa","name":"American Samoa"}]}</script>

Answer 2

我们需要检查是否具有公共访问权限的存储桶。
如果Bucket doe没有公共渠道，则将Bucket设为public 3.如果具有公共访问权限的存储桶仍然出现错误，则请执行以下步骤路径==>转到您的存储桶==> permissionTab ==>找到CROSS TAB，在配置下方添加...

注意：在配置“资源”下，替换您的bucketName
```
{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::YourBucketName/*"]
    }
  ]
}
```

Angular - 在S3中上传后出现禁止错误

2 个答案:

注意：在配置“资源”下，替换您的bucketName