Angular 4/5 文件上传或图片上传至 Amazon S3

Question

我将尝试在我的MEAN应用中实现文件上传。我的后端（Node和Express）和前端（Angular）是分别部署的。我需要通过Angular将文件上传到亚马逊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配置，我现在很困惑。

- Sherwin Ablaña Dapito

---

你的后端是什么？ - Robert

我相信你需要一个后端方法来处理AWS S3文件上传。 - Igor Dimchevski

可以从浏览器中完成。 - Tomasz Kula

@TomaszKula 在前端这样做是不安全的。 - Kelvin Lai

Answer 1

如果可能的话，请避免在浏览器中使用 AWS SDK，因为您将无法对其使用进行速率限制。更糟糕的是，如果您在前端存储访问密钥，则可能会暴露您的 AWS 凭据。

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

- Kelvin Lai

---

我已经在我的Node后端上设置了AWS SDK，但为了测试目的，我使用了EJS模板引擎，但它使用multer-s3来支持文件上传。如果我可以使用我在Node中创建的中间件来处理来自Angular的请求，那就太好了。谢谢您的见解，我会尝试更多的实验。 - Sherwin Ablaña Dapito

Answer 2

您应该使用AWS JavaScript SDK。

您可以在此处查看上传照片的示例。

function addPhoto(albumName) {
  var files = document.getElementById('photoupload').files;
  if (!files.length) {
    return alert('Please choose a file to upload first.');
  }
  var file = files[0];
  var fileName = file.name;
  var albumPhotosKey = encodeURIComponent(albumName) + '//';

  var photoKey = albumPhotosKey + fileName;
  s3.upload({
    Key: photoKey,
    Body: file,
    ACL: 'public-read'
  }, function(err, data) {
    if (err) {
      return alert('There was an error uploading your photo: ', err.message);
    }
    alert('Successfully uploaded photo.');
    viewAlbum(albumName);
  });
}

- Tomasz Kula

---

谢谢，关于使用Angular 4/5和Node上传文件到Amazon S3的教程并不多。我会尝试使用这种方法，并设置必要的AWS凭证和安全性。 - Sherwin Ablaña Dapito