如何在Angular前端中使用Heroku的Simple File Upload（S3 CDN）功能

1. Heroku 侧前置配置 #

• 首先在你的Heroku应用的Resources面板，搜索添加Simple File Upload插件，选择对应付费/免费套餐完成开通
• 开通后进入插件管理页，拿到平台分配的上传公钥（Public Key），这个是前端调用的唯一凭证，不需要暴露S3密钥
• 按需配置上传规则：比如允许的文件类型、单文件大小上限、文件过期时间、CDN缓存策略，配置后会自动同步到关联的S3和CDN节点

2. Angular 项目环境准备 #

• 确认你的Angular版本≥12，低版本需要额外适配rxjs语法
• 安装上传依赖：npm install @heroku/simple-file-upload --save
• 在environment.ts里配置拿到的公钥：

// environment.ts
export const environment = {
  production: false,
  herokuUploadPublicKey: '你从Heroku后台拿到的公钥字符串'
};

3. 前端功能集成步骤 #

3.1 引入并注册依赖 #

在需要用到上传功能的模块里导入对应依赖：

// app.module.ts 或对应业务模块
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { SimpleFileUploadModule } from '@heroku/simple-file-upload';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, SimpleFileUploadModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

3.2 组件逻辑实现 #

在组件类中编写上传处理逻辑：

// upload.component.ts
import { Component } from '@angular/core';
import { SimpleFileUploadService } from '@heroku/simple-file-upload';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent {
  uploadedFileUrl = '';
  uploadError = '';
  isUploading = false;

  constructor(private uploadService: SimpleFileUploadService) {}

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

    this.isUploading = true;
    this.uploadError = '';
    const file = input.files[0];

    // 调用上传接口，自动走S3+CDN链路
    this.uploadService.upload(environment.herokuUploadPublicKey, file)
      .subscribe({
        next: (res) => {
          // 返回的res.url就是CDN加速的永久访问地址
          this.uploadedFileUrl = res.url;
          this.isUploading = false;
        },
        error: (err) => {
          this.uploadError = '上传失败：' + err.message;
          this.isUploading = false;
        }
      })
  }
}

3.3 模板代码实现 #

<!-- upload.component.html -->
<div class="upload-container">
  <input 
    type="file" 
    id="fileInput" 
    (change)="onFileSelected($event)"
    [disabled]="isUploading"
  >
  <label for="fileInput" class="upload-btn">
    {{ isUploading ? '上传中...' : '选择文件上传' }}
  </label>

  @if (uploadError) {
    <p class="error-tip">{{ uploadError }}</p>
  }

  @if (uploadedFileUrl) {
    <div class="result">
      <p>上传成功，CDN访问地址：</p>
      <a [href]="uploadedFileUrl" target="_blank">{{ uploadedFileUrl }}</a>
    </div>
  }
</div>

4. 注意事项 #

• 上传的文件会自动存储到Heroku关联的S3桶，自动触发CDN全球节点缓存，不需要手动操作S3配置
• 如果需要限制文件类型，除了在Heroku后台配置，也可以在input标签加accept属性做前置校验，减少无效请求
• 大文件上传可以开启SDK自带的分片上传功能，调用时加第三个参数{ chunked: true, chunkSize: 5 * 1024 * 1024 }即可，断点续传逻辑SDK已经内置
• 免费套餐有上传次数和存储容量限制，生产环境建议升级到对应付费档位

内容的提问来源于stack exchange，提问作者Carli Beeli