如何在 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 上使用 Django Rest Framework 后端部署 Angular 4 前端
使用 Angular 2 前端部署在 Heroku Java 应用程序上
如何在 Heroku 上使用我的 Angular 应用程序解决 CORS 问题