Angular 4/5 文件上传或图像上传到 Amazon S3

Question

我正在尝试在我的 MEAN 应用程序中实现文件上传。我的后端(Node 和 Express)和前端(Angular)是分开部署的。我需要的是通过 Angular 将文件上传到 amazon s3，上传成功后获取目标地址，然后将文件目标保存到变量中。

有什么简单的方法可以实现吗？假设我有这样的表格

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <input type="file" id="myImage" (change)="onFileChange($event)" #fileInput>
    <hr>

   <div class="text-right">
        <button type="submit" class="btn btn-primary">Actualizar perfil</button>
   </div><br>
</form>

然后这段代码将在我的组件上(只是为了测试我可以获取文件)

@ViewChild('fileInput') fileInput: ElementRef;

createForm() {
    this.form = this.formBuilder.group({
        'myImage': null
    });
}


onFileChange(event) {
    let reader = new FileReader();
    if(event.target.files && event.target.files.length > 0) {
        let file = event.target.files[0];
        reader.readAsDataURL(file);
        reader.onload = () => {
        this.form.get('myImage').setValue({
                filename: file.name,
                filetype: file.type,
                value: reader.result.split(',')[1]
            })
        };
    }
}

onSubmit() {
    const formModel = this.form.value;
    this.loading    = true;

    setTimeout(() => {
        console.log(formModel);
        alert('Finished uploading');
        this.loading = false;
    }, 1000);
} 

如何将文件从我的表单发送到 Amazon S3？然后在 amazon s3 中获取文件目标，这样我就可以将它保存到我的数据库中，以便稍后获取。我也不确定是否应该为我的后端或前端创建 amazon s3 配置，我现在很困惑。

Answer 1

如果可以，尽量避免在浏览器中使用 AWS SDK，因为您将无法对使用进行速率限制。或者更糟的是，如果您将访问 key 存储在前端，您可能会暴露您的 AWS 凭证。

相反，在您的 node.js 后端使用 AWS SDK 并将 API 作为代理公开。参见 https://aws.amazon.com/sdk-for-node-js/ .