如何在 Angular 前端使用 Heroku (S3 CDN) 的“简单文件上传”功能

Posted

技术标签:

【中文标题】如何在 Angular 前端使用 Heroku (S3 CDN) 的“简单文件上传”功能【英文标题】:How to use the "Simple File Upload" feature of Heroku (S3 CDN) in a Angular frontend 【发布时间】:2022-01-09 10:05:39 【问题描述】:

如何在 Angular 应用中使用 Heroku 的“简单文件上传”资源?

【问题讨论】:

【参考方案1】:

在您的 Angular 应用程序中:

1.) 在 index.html 的 head 部分添加:

<script src="https://app.simplefileupload.com/buckets/000000yourkey00000000.js"></script>

2.) 在组件的模板中,您要显示上传小部件的位置添加:

<form [formGroup]="imageUploadForm">
   <input
      type="hidden"
      name="image_url"
      id="image_url"
      #image_url
      class="simple-file-upload">
</form>

3.) 在组件中,您想要显示上传小部件的位置添加:

@ViewChild('image_url', static: false) imageURL: ElementRef;

4.) 在组件中,您希望显示上传小部件的位置访问上传图像的 URL,如下所示:

const imageURL = this.imageURL.nativeElement.value;

同时创建一个名为 imageUploadForm 的标准 FormGroup。

【讨论】:

以上是关于如何在 Angular 前端使用 Heroku (S3 CDN) 的“简单文件上传”功能的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Heroku 上部署项目

在 Heroku 上使用 Django Rest Framework 后端部署 Angular 4 前端

使用 Angular 2 前端部署在 Heroku Java 应用程序上

如何在 Heroku 上使用我的 Angular 应用程序解决 CORS 问题

从 Heroku Angular 前端调用 Heroku springboot 后端时,Rest 调用返回 403

Heroku 和 Angular 路由