从AWS S3获取的Angular 6显示图像 [英] Angular 6 display image fetched from AWS S3

问题描述

我是Angular 6的新手，但遇到了一个问题，无法从AWS S3存储桶中获取图像/doc/excel文件.

I am new on Angular 6 and stuck in a problem to get the image/doc/excel file from aws S3 bucket.

这是我的代码:

var S3 = new AWS.S3();
    const params = {
      Bucket: 'asdasd',
      region: 'asadas1',
      accessKeyId: 'SADIYIUYSADSA8768GHSAD',
      secretAccessKey: 'sdas+sadJSADH7',

    }

    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页面上.

I want to fetch images from s3 and display them on my HTML page.

推荐答案

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

The problem is, that you used invalid Parameters to your API calls - the SDK doesn't know what to do with region, accessKeyId and secretAccessKey:

const params = {
  Bucket: 'asdasd',
  region: 'asadas1',                      // Here,
  accessKeyId: 'SADIYIUYSADSA8768GHSAD',  // here
  secretAccessKey: 'sdas+sadJSADH7',      // and here

}

请参阅 listObjects API文档供参考.

很明显，您的SDK的设置方式不正确，请参见有关操作方法的文档.

Apparently your SDK isn't set up in the correct way, please see the documentation on how to do that.

• 服务器端JS代码文档
• 客户端文档侧JS代码-即Angular

注意:如果您使用的是诸如Angular之类的客户端JS框架，则对安全凭证进行硬编码是一个糟糕的主意！您的用户将能够看到这些内容并使用它们来访问其他资源.我上面链接的文档为您提供了更好的选择.

如果您想忽略最佳实践，您绝对不应该，那么您可以通过以下方式做到这一点:

If you want to ignore Best Practices, which you absolutely shouldn't, this is how you could do it:

按照记录

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

这篇关于从AWS S3获取的Angular 6显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！