如何通过Angular 5将文件上传至Amazon S3？

嘿，别着急，我来给你梳理两种可行的方案，亲测能搞定Angular 5到S3的文件上传，你可以根据场景选：

推荐方案：预签名URL上传（安全，适合生产环境） #

直接在前端暴露AWS密钥风险极高，所以后端生成预签名URL，前端用这个URL发起PUT请求上传才是正确姿势，步骤如下：

1. 后端生成预签名URL（以Node.js为例） #

首先在后端搭个简单接口生成预签名URL：

• 安装AWS SDK：npm install aws-sdk --save
• 编写接口代码：

const AWS = require('aws-sdk');
const express = require('express');
const app = express();

// 配置AWS（建议用环境变量存密钥，不要硬编码！）
AWS.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY,
  secretAccessKey: process.env.AWS_SECRET_KEY,
  region: '你的S3桶区域，比如us-east-1'
});

const s3 = new AWS.S3();

// 生成预签名URL的接口
app.get('/api/s3-presigned-url', (req, res) => {
  const { filename } = req.query;
  if (!filename) return res.status(400).send('文件名不能为空');

  const params = {
    Bucket: '你的S3桶名称',
    Key: filename,
    Expires: 3600 // URL有效期1小时
  };

  s3.getSignedUrl('putObject', params, (err, url) => {
    if (err) {
      console.error('生成预签名URL失败:', err);
      return res.status(500).send('服务器错误');
    }
    res.send(url);
  });
});

app.listen(3000, () => console.log('后端服务运行在3000端口'));

2. Angular 5前端实现 #

2.1 导入HttpClientModule

确保在app.module.ts里导入HttpClientModule，这样才能发HTTP请求：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.2 编写上传组件

创建一个上传组件，比如file-upload.component.ts：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-file-upload',
  template: `
    <input type="file" (change)="onFilePick($event)" accept="*">
    <button (click)="startUpload()" [disabled]="!selectedFile">上传到S3</button>
  `
})
export class FileUploadComponent {
  selectedFile: File | null = null;

  constructor(private http: HttpClient) { }

  onFilePick(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files?.length) {
      this.selectedFile = input.files[0];
    }
  }

  async startUpload(): Promise<void> {
    if (!this.selectedFile) return;

    try {
      // 第一步：从后端获取预签名URL
      const presignedUrl = await this.http.get(
        `/api/s3-presigned-url?filename=${this.selectedFile.name}`,
        { responseType: 'text' }
      ).toPromise();

      // 第二步：用PUT请求上传文件
      await this.http.put(presignedUrl, this.selectedFile, {
        headers: { 'Content-Type': this.selectedFile.type }
      }).toPromise();

      alert('文件上传成功！');
    } catch (error) {
      console.error('上传失败:', error);
      alert('上传出错了，看看控制台日志吧');
    }
  }
}

3. S3桶CORS配置 #

必须给你的S3桶配置CORS，允许前端域名的PUT请求：
在S3控制台 → 你的桶 → 权限 → 跨域资源共享（CORS），添加以下规则：

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["PUT"],
    "AllowedOrigins": ["http://localhost:4200"], // 替换成你的前端域名
    "ExposeHeaders": []
  }
]

备选方案：直接用AWS SDK（仅测试环境） #

如果只是本地测试，不想写后端，可以直接在Angular里用AWS SDK，但生产环境绝对不能这么做，会泄露你的AWS密钥：

• 安装AWS SDK：npm install aws-sdk --save
• 组件代码：

import { Component } from '@angular/core';
import * as AWS from 'aws-sdk';

@Component({
  selector: 'app-test-upload',
  template: `<input type="file" (change)="uploadFile($event)">`
})
export class TestUploadComponent {
  constructor() {
    // 仅测试用，生产环境绝对不要硬编码密钥！
    AWS.config.update({
      accessKeyId: '你的测试Access Key',
      secretAccessKey: '你的测试Secret Key',
      region: '你的桶区域'
    });
  }

  uploadFile(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (!input.files?.length) return;

    const file = input.files[0];
    const s3 = new AWS.S3();
    const params = {
      Bucket: '你的测试桶名称',
      Key: file.name,
      Body: file
    };

    s3.upload(params, (err, data) => {
      if (err) {
        console.error('上传失败:', err);
      } else {
        console.log('上传成功，文件地址:', data.Location);
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者sumit patil