如何以角度 7 从 AWS S3 存储桶中获取和显示图像答案

【问题标题】：How to fetch and display the images from AWS S3 bucket in angular 7如何以角度 7 从 AWS S3 存储桶中获取和显示图像
【发布时间】：2019-12-01 08:55:16
【问题描述】：

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

我在我的项目中安装了 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)
    });
  });
}

预期输出：

我应该能够显示图像

实际结果：

我无法获取或显示图片网址

【问题讨论】：

几件事：您如何将它与 Angular 一起使用？您是否收到任何错误 - console.log 是否显示正确的网址？
yaaa Zlatko 我正在获取图片网址，但我需要获取预签名的网址
你能显示实际的角码吗？你知道你必须用 Angulars DomSanitizer 清理 url 吗？
嗨 zlatko，这是我的代码，但在编译时没有错误，请帮助我如何使用 angulars DomSanitizer
我会的，但首先您需要展示如何使用您在 Angular 代码中展示的功能？你有 Angular 代码吗？

标签： javascript angular angular7

【解决方案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)

【讨论】：

您好 abderrahim，感谢您的回复，实际上我只有三个数据 bucketregion，bucket name，identity pool id 而不是 key 所以我不能使用上面的代码有没有办法通过使用来获取预签名的 url认知
key是bucket S3上的文件名
Cognito 是另一项服务（管理身份和用户）您只需使用 S3 使用 getSignedUrl() 方法获取您的 url，但您需要有存储桶名称和文件名。
但出现类似 ERROR ReferenceError: global is not defined 的错误