前言
在现在的网络应用中，文件上传已经成为越来越普遍的需求。而Angular是以组件化方式构建 Web 应用程序的开发平台，因此，使用Angular实现文件上传是一个非常好的选择。在本文中，我们将分享如何使用Angular5在Web应用中优雅地实现文件上传。
准备工作
在开始编写代码之前，我们需要选择一个文件上传库。Angular官方并没有提供原生的文件上传库。因此，我们可以使用一些流行的第三方库，例如ng2-file-upload或者ngx-uploader。在本文中，我们将使用Angular Material作为UI库，并使用ngx-material-file-input作为上传控件。
在开始之前，我们需要创建一个新的Angular项目并添加Angular Material和ngx-material-file-input库。我们可以使用ng add命令去添加这两个库：
ng add @angular/material ng add ngx-material-file-input
代码实现
HTML
我们的HTML代码会包含一个上传控件和一个按钮。上传控件使用ngx-material-file-input库提供的控件。按钮用来触发上传动作。
<mat-form-field appearance="outline">
<ngx-mat-file-input fileInputLabel="选择文件..." multiple accept="*">
</ngx-mat-file-input>
</mat-form-field>
<button mat-raised-button color="primary" (click)="upload()">上传</button>TypeScript
以下是我们的TypeScript代码。在我们的组件中，我们绑定了ngx-mat-file-input组件的值到selectedFiles数组中。上传方法实现了文件上传的逻辑，当用户选择文件并点击上传按钮时，我们在selectedFiles数组中遍历每个文件，并通过HTTP POST请求将它们上传到服务器。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------ - ----------------- - ---- ------------------------ ------------ --------- ------------------ ------------ ------------------------------- ---------- ------------------------------- -- ------ ----- ------------------- - -------------- ------ - --- ------------------- ----- ----------- ------- ------------------ ------------------ -- -------- - ----- -------- - --- ----------- --- ---- - - -- - - -------------------------- ---- - ------------------------------- ---------------------- ---------------------------- - -------------------------------------------------- ---------- -- ---------------------- ------- -- ------------------ -- - -
服务代码
在 TypeScript 代码中，我们使用一个FileUploadService来发送HTTP请求，将文件上传到服务器。在 FileUploadService 服务中我们使用 httpClient.post 方法来发送 HTTP POST 请求以及多个参数，如URL和文件内容。
我们使用 Observables 来处理文件上传响应， responseType 选项设置为 text，以便在正常情况下解析服务器响应。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------------- ----------- ------ -- ------ ----- ----------------- - ------------------- ----- ----------- -- ---------------- - ------ ------------------------------------------------ --------- - --------------- ----- -------- --------- ------------- ------- --- - -
结论
在本文中，我们介绍了使用 Angular 5 实现文件上传的方法，并使用 ngx-material-file-input 作为我们的上传控件。我们还提供了一个示例程序，演示了如何上传文件并将多个文件捆绑在一个表单中。希望这篇文章能够帮助你更好地使用 Angular 来上传你的文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d4d32a336082f254bd6fc