Angular2文件上传到亚马逊S3存储桶

Question

我知道如何在Angular 1中上传Amazon S3文件。请问在Angular 2中如何上传文件，但是我并没有找到任何关于Angular 2的解决方案。

- Deepak

---

你能否加入一些关于你在Angular1中所采用方法的提示呢？这样我就能够将你的代码适配到Angular2了。 - Thierry Templier

我使用了这种方法在AngularJS中将文件上传到亚马逊存储桶http://www.cheynewallace.com/uploading-to-s3-with-angularjs/。 - Deepak

@Deepakrao，你有没有看过我的回答？ - CESCO

Answer 1

它仍需要更好/一些安全性。

HTML

<form  (ngSubmit)="onSubmit(f)" #f="ngForm" action="">
<input type="file" (change)="fileEvent($event)" />
</form>
<button (click)="uploadfile(f)">Upload file!</button>

ts

export class Page2 {
    myfile:any;
    file:any;

constructor() {
}


   uploadfile(event) {
        AWS.config.accessKeyId = 'YOUR-ACCESS-KEY';
        AWS.config.secretAccessKey = 'YOU-SECRET-ACCESS-KEY';
        var bucket = new AWS.S3({params: {Bucket: 'YOUR-BUCKET-NAME'}});
        var params = {Key: this.file.name, Body: this.file};
        bucket.upload(params, function (err, data) {
            console.log(err, data);
        });
    }


    fileEvent(fileInput: any){
        var files = event.target.files;
        var file = files[0];
        this.file = file;
    }

}

- CESCO

---

这个类 AWS 是从哪里来的？ - Cassio Landim

这是 AWS js sdk @CassioLandim。 - CESCO

把秘密放在客户端JS上是安全的吗？ - astroanu

@CESCO 我使用了你的代码，但是当我添加了这一行 var files = event.target.files; 后，它显示错误消息：- 属性'files'在类型'EventTarget'上不存在。我使用的是Angular2。 - Renu Thakur

我曾经遇到过同样的问题。尝试使用fileInput代替，应该可以解决EventTarget错误。 fileEvent(fileInput: any){ var files = fileInput.srcElement.files; var file = files[0]; this.file = file; } - JasonPerr

Answer 2

如果您使用Rails后端（甚至是Node），最简单的解决方案是创建一个预签名的URL（必须是PUT），然后使用Angular服务调用该PUT并将文件附加到请求的正文中。

您可以在此处了解更多信息。

- rmcsharry

Answer 3

我不知道你是否已经解决了这个问题，但你所要做的就是重新构建发送到S3的POST请求。

你可以查看这个链接： https://github.com/ntheg0d/angular2_aws_s3

- ntheg0d

---

谢谢。我已经将这个链接转换成了Angular2，现在它正常工作。感谢您的支持。 - Deepak

你能发布你的Angular 2代码吗？我遇到了麻烦。 - Jeremy Thomas

@JeremyThomas 请查看我上面发布的 GitHub 链接，但是代码可能已经过时了。 - ntheg0d

@JeremyThomas，请查看我的答案，其中包含我解决此问题的链接，展示了大量Angular代码。 - rmcsharry