如何在 angular 7 中从 AWS S3 存储桶中获取和显示图像

Question

我是 angular 7 的新手，我需要使用 AWS Cognito（我有身份池 ID）从 AWS S3 存储桶中获取和显示图像。

我已经在我的项目中安装了 AWS SDK、S3、AWS Cognito，并尝试获取和显示图像，但我只得到图像 URL，我无法访问它，所以请指导我这个

viewAlbum(albumName:any) {
  var albumBucketName = 'XXXX';
  var bucketRegion = 'XXXX';
  var IdentityPoolId = 'XXXXX';
  var AWS = require('aws-sdk');
  AWS.config.update({
    region: bucketRegion,
    credentials: new AWS.CognitoIdentityCredentials({
      IdentityPoolId: IdentityPoolId
      })
  });
  var s3 = new AWS.S3({
    apiVersion: '2006-03-01',
    params: {Bucket: albumBucketName}
  });
  var albumPhotosKey = encodeURIComponent(albumName);
  s3.listObjects({Prefix: albumPhotosKey}, function(err:any, data:any) {
    console.log("photos::::",data)
    if (err) {
      return alert('There was an error viewing your album: ' + err.message);
    }
    var href = this.request.httpRequest.endpoint.href;
    var bucketUrl = href + albumBucketName + '/';

    var photos = data.Contents.map(function(photo:any) {
    var photoKey = photo.Key;
    var photoUrl = bucketUrl + encodeURIComponent(photoKey);
    console.log("viewalbus::::",photoUrl)
    });
  });
}

预期输出：

我应该可以显示图像

实际结果：

我无法获取图像 URL 或显示它

Answer 1

实际上您需要从 S3 获得签名 URL :

确保已安装 sdk 并进行配置 (user_id , secret_key) :

npm install aws-sdk

然后

import * as AWS from 'aws-sdk';


let s3= new AWS.S3();

const url = s3.getSignedUrl('getObject', {
    Bucket: myBucket,
    Key: myKey
})

console.log(url)

如何在 angular 7 中从 AWS S3 存储桶中获取和显示图像

How to fetch and display the images from AWS S3 bucket in angular 7

javascript

angular

angular7