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

Question

我是 Angular 6 的新手，在从 aws S3 存储桶获取 image/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 页面上。

Answer 1

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

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

}

请参考listObjects API Documentation

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

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

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

按照记录在脚本开头设置您的 AWS 信息 here:

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

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

Answer 2

在 npm 中尝试 multer-s3 包。我正在使用它并且效果很好。

提示：永远不要像这样共享您的 AWS 密钥 ID 和秘密 ID...我重复一遍。不要!!!!!..删除此 post 或使您的访问密钥处于非活动状态。

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

Angular 6 display image fetched from AWS S3

amazon-s3

amazon-web-services

typescript

aws-sdk

angular