Angular 10 是目前最新的 Angular 版本，其中一个新的重要特性是 HttpClient 模块。它提供了强大的 API，让我们可以轻松地发送 HTTP 请求，并且支持 JSON、XML、Multipart 等多种数据格式。在这篇文章中，我们将介绍如何使用 Angular 10 的 HttpClient 模块实现文件上传的功能。
准备工作
在开始使用 HttpClient 上传文件之前，我们需要进行一些准备工作。首先，需要确保已经安装了 Angular 10，并且已经创建了一个新的 Angular 项目。其次，我们需要引入 HttpClient 模块，方法是在 AppModule 中引入 HttpClientModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
-----------
-------- -
----------------
--
-------- -
----------------
-
--
------ ----- --------- --接下来，我们需要在 HTML 文件中创建一个上传文件的表单。这个表单应该包含一个 input 元素，并且设置 type 属性为 file：
<form> <input type="file" #fileInput> <button (click)="uploadFile(fileInput)">上传文件</button> </form>
注意，我们在 input 元素上添加了一个 #fileInput 的模板引用变量，后面我们会用到它来获取上传的文件。
最后，我们需要编写一个服务来处理文件上传的逻辑。在该服务中，我们需要使用 HttpClient 模块来发送 HTTP 请求，并且使用 FormData API 将文件作为二进制数据发送到后端。以下是示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- ----------------- -
------- ---- - ------------------------------- -- -- --- --
------------------- ----- ----------- - -
---------------- ----- -
----- -------- - --- -----------
----------------------- ----- -----------
------ ------------------------- ----------
-
-在这里，我们首先创建了一个 FormData 对象，并将文件作为二进制数据添加到该对象中。然后，我们使用 HttpClient 的 post 方法来发送 HTTP 请求，注意，我们将 FormData 对象作为请求体发送。
上传文件
一切准备就绪后，我们开始编写上传文件的逻辑。在组件中，我们需要将 HTML 中的上传表单和 uploadFile 方法进行绑定。以下是示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -----------
--------- -
------
------ ----------- -----------
------- ---------------------------------------------
-------
-
--
------ ----- ------------ -
------------------- ------------------ ------------------ - -
--------------------- ---- -
----- ---- - -------------------
---------------------------------------------------------- -- -
----------------------
---
-
-在这里，我们在组件的构造函数中注入了 FileUploadService，然后在 uploadFile 方法中获取上传的文件，并将其传递给服务。注意，我们在服务的返回值上使用了 RxJS 的 subscribe 方法，以便我们可以处理服务端的响应。
总结
通过本文的介绍，你已经学会了如何在 Angular 10 中使用 HttpClient 模块实现文件上传的功能。关键在于理解 FormData API 和 HttpClient 的用法，并且结合 HTML 中的上传表单使用。在实际开发中，你可能还需要考虑并发上传、上传进度等更多问题，但是这些问题超出了本文的范围。希望这篇文章对你有所帮助，也欢迎大家在评论区留下自己的想法和问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65adb52cadd4f0e0ff732cae