从 AWS S3 获取的 Angular 6 显示图像答案

【问题标题】：Angular 6 display image fetched from AWS S3从 AWS S3 获取的 Angular 6 显示图像
【发布时间】：2019-01-10 08:08:39
【问题描述】：

我是 Angular 6 的新手，遇到了从 aws S3 存储桶获取图像/doc/excel 文件的问题。

这是我的代码：

var S3 = new AWS.S3();
    const params = {
      Bucket: 'asdasd',
      region: 'asadas1',
      accessKeyId: '[accessKeyId]',
      secretAccessKey: '[secretAccessKey]',
      
    }

    S3.listObjects(params, function (err, data) {
      if (err) {
        console.log('There was an error getting your files: ' + err);
        return;
      }

      console.log('Successfully get files.', data);

      const fileDatas = data.Contents;

      fileDatas.forEach(function (file) {
        
      });
    });

我收到错误：

MultipleValidationErrors: There were 3 validation errors:
* UnexpectedParameter: Unexpected key 'region' found in params
* UnexpectedParameter: Unexpected key 'accessKeyId' found in params
* UnexpectedParameter: Unexpected key 'secretAccessKey' found in params

我想从 s3 获取图像并将它们显示在我的 HTML 页面上。

【问题讨论】：

显示你的尝试，这里是如何提问 - stackoverflow.com/help/how-to-ask
我还没有得到任何关于这个网址 grokonez.com/frontend/… 的信息，这对我不起作用..
告诉免费帮助你的人尽快做某事并不是一个好主意。

标签： angular typescript amazon-web-services amazon-s3 aws-sdk

【解决方案1】：

问题是，您在 API 调用中使用了无效参数 - SDK 不知道如何处理 region、accessKeyId 和 secretAccessKey：

const params = {
  Bucket: 'asdasd',
  region: 'asadas1',                      // Here,
  accessKeyId: '[accessKeyId]',  // here
  secretAccessKey: '[secretAccessKey]',      // and here

}

请参阅listObjects API Documentation 以供参考。

显然您的 SDK 设置不正确，请参阅文档了解如何设置。

注意：如果您使用的是 Angular 等客户端 JS 框架，那么硬编码安全凭证是一个糟糕的主意！您的用户将能够看到这些并使用它们来访问其他资源。我在上面链接的文档向您展示了更好的选择。

如果您想忽略最佳实践，绝对不应该，您可以这样做：

在脚本开头设置您的 AWS 信息，如记录的here：

AWS.config.update({
    region: 'us-east-1',
    accessKeyId: "Don't do this",
    secretAccessKey: "It's a terrible idea!"
});

重申一下，在客户端代码中硬编码凭据是一个糟糕的主意！

【讨论】：

【解决方案2】：

在 npm 中尝试 multer-s3 包。我正在使用它，它工作正常。

提示：永远不要像这样分享您的 AWS 密钥 ID 和秘密 ID...我重复一遍。不要!!!!!!.. 删除此帖子或使您的访问密钥无效。

【讨论】：