在前端开发中，图片上传是一个非常常见的需求。在 Angular 中，可以通过多种方式来处理图片上传，包括使用原生的 HTML 表单元素、使用第三方库、使用 Angular 的自定义指令等等。本文将介绍其中一种比较常见的方式，即使用 Angular 的 HttpClient 发送 FormData 对象来上传图片。
准备工作
在开始之前，需要确保已经安装了 Angular CLI，并创建了一个新的 Angular 项目。如果还没有安装 Angular CLI，可以通过以下命令进行安装：
npm install -g @angular/cli
创建一个新的 Angular 项目也非常简单，只需要执行以下命令即可：
ng new my-app
创建上传组件
首先，我们需要创建一个上传组件，用于选择和上传图片。可以通过以下命令来创建一个新的组件：
ng generate component upload
创建完成后，在 upload.component.html 文件中添加以下 HTML 代码：
<div> <input type="file" (change)="onFileSelected($event)" accept="image/*"> <button (click)="onUpload()">Upload</button> </div>
这里使用了一个 HTML 表单元素 input 来选择图片，并添加了一个按钮用于触发上传操作。需要注意的是，input 的 type 属性设置为 file，accept 属性设置为 image/*，表示只能选择图片文件。
在 upload.component.ts 文件中，添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- -
------------- -----
------------------- ----- ----------- - -
--------------------- -
----------------- - ----------------------
-
---------- -
----- -- - --- -----------
------------------ ------------------ ------------------------
---------------------------------------------- ---
-------------- -- -
-----------------
---
-
-这里使用了 Angular 的 HttpClient 来发送 POST 请求，并传递了一个 FormData 对象作为请求的数据。在 onFileSelected 方法中，通过 event.target.files[0] 获取用户选择的文件，并保存在 selectedFile 变量中。在 onUpload 方法中，创建一个 FormData 对象，并将选中的文件添加到 FormData 中。然后使用 HttpClient 发送 POST 请求，将 FormData 作为请求数据。
需要注意的是，这里的请求地址是 http://localhost:3000/upload，需要根据实际情况进行修改。
创建后端服务
由于需要将图片上传到服务器，因此需要创建一个后端服务来处理上传的图片。这里使用 Node.js 和 Express 来创建一个简单的后端服务。可以通过以下命令来创建一个新的 Node.js 项目：
npm init
然后安装 Express 和 Multer：
npm install express multer
在项目根目录下创建一个 server.js 文件，添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------
----- --- - ----------
----- ------- - --------------------
------------ ----- ----- --- -- -
-------- ------------
--
--------- ----- ----- --- -- -
-------- -------------------
-
---
----- ------ - -------- -------- ------- ---
------------------- ----------------------- ----- ---- -- -
---------------- ----------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---这里使用了 Multer 中间件来处理上传的文件。Multer 提供了多种存储方式，这里使用了 diskStorage 存储方式，将文件保存在 uploads 文件夹下，并使用原始文件名作为文件名。
在 Express 中，使用 app.post 定义一个 POST 请求处理器，将上传的文件保存在 uploads 文件夹下，然后返回一个字符串表示上传成功。
运行应用程序
现在，我们已经创建了一个上传组件和一个后端服务，可以运行应用程序进行测试了。首先需要启动后端服务，在项目根目录下执行以下命令：
node server.js
然后在另一个命令行窗口中，进入 Angular 项目所在的目录，执行以下命令：
ng serve
在浏览器中打开 http://localhost:4200，即可看到上传组件。选择一个图片文件，并点击 Upload 按钮，即可将图片上传到后端服务。
总结
通过本文的介绍，我们了解了如何在 Angular 中处理图片上传，使用了 Angular 的 HttpClient 发送 FormData 对象，以及使用了 Multer 中间件来处理上传的文件。这种方式比较简单且常用，可以满足大部分的图片上传需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6619b9b9d10417a222a6a380