angular - 无法将图像从我的网站直接上传到 S3

问题描述

我正在尝试将图像从我的网站直接上传到 AWS S3。我已遵循此处提到的文档：- https://auth0.com/docs/integrations/integrating-auth0-amazon-cognito-mobile-apps

我用来上传图片的代码如下：-

import { Component, OnInit } from '@angular/core';
import * as AWS from 'aws-sdk';
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-profile',
  templateUrl: `
  <label for="imageUpload">Image Upload</label>
  <input type="file" (change)="fileEvent($event)" name="imageUpload" id="imageUpload"/>
  `,
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

  constructor(public auth: AuthService) { }

  ngOnInit() {
  }

  fileEvent(fileInput: any) {
    const AWSService = AWS;
    const region = 'us-west-2';
    const bucketName = '<my-bucket-name>'; // e.g. images.uat.testing, tried this one and below one.
    // const bucketName = 'http://<my-bucket-name>.us-west-2.amazonaws.com.';
    const IdentityPoolId = 'us-west-2:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX';
    const token = this.auth.getAccessToken();
    console.log(token);
    const file = fileInput.target.files[0];
    // Configures the AWS service and initial authorization
    AWSService.config.update({
      region: region,
      credentials: new AWSService.CognitoIdentityCredentials({
        IdentityPoolId: IdentityPoolId,
        Logins: {
          'mypleaksofficial.auth0.com': token
      }
      })
    });

    // adds the S3 service, make sure the api version and bucket are correct
    const s3 = new AWSService.S3({
      apiVersion: '2006-03-01',
      params: { Bucket: bucketName }
    });

    // I store this in a variable for retrieval later
    const image: string = file.name;
    s3.upload({ Key: file.name, Bucket: bucketName, Body: file, ACL: 'public-read' }, function (err, data) {
      if (err) {
        console.log(err, 'there was an error uploading your file');
      }
    });
  }
}

我还将我的 OpenID 提供程序与 Amazon Cognito 连接起来，如下所示，但我仍然收到以下错误：-

POST https://cognito-identity.us-west-2.amazonaws.com/ 400 ()
    profile.component.ts:46 Error: Missing credentials in config
        at Request.extractError (json.js:48)
        at Request.callListeners (sequential_executor.js:105)

请帮我解决这个问题。

标签： angularamazon-web-servicesamazon-s3amazon-cognitoauth0

看起来您正在设置凭据配置，但您没有从 cognito 检索有效凭据。在“AWSService.config.update(...”之后试试这个：

AWS.config.credentials.get(function(err, data) {
    if (!err) console.log("Error getting credentials", err);
    else {
        const s3 = new AWSService.S3({
            apiVersion: '2006-03-01',
            params: { Bucket: bucketName }
        });
        const image: string = file.name;
        s3.upload({ Key: file.name, Bucket: bucketName, Body: file, ACL: 'public-read' }, function (err, data) {
            if (err) {
                console.log(err, 'there was an error uploading your file');
            }
        });
    }
});

如果你在“get”调用中没有错误，你应该能够达到你的目标。问候，

angular - 无法将图像从我的网站直接上传到 S3

问题描述

解决方案

推荐阅读