文件上传是 Web 开发中常见的需求之一，Angular 8.x 中的 HttpClient 提供了一种简单易用的方式来实现文件上传功能。本文将介绍 Angular 8.x 中 HttpClient 实现文件上传的全流程，包括前端页面的实现和后端 API 的实现。
前端实现
HTML 页面
在 HTML 页面中，我们需要添加一个文件上传表单，如下所示：
<form enctype="multipart/form-data" (submit)="onSubmit()"> <input type="file" name="file" (change)="onFileSelected($event)" /> <button type="submit">上传</button> </form>
其中，enctype="multipart/form-data" 是必须的，因为我们要上传二进制文件。onSubmit() 方法将在用户点击上传按钮时被调用，onFileSelected($event) 方法将在用户选择文件时被调用。
TypeScript 代码
在 TypeScript 代码中，我们需要使用 HttpClient 发送 POST 请求，并将文件作为请求体发送。代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
-- ---
------------------- ----- ----------- --
--------------------- ---- -
----------------- - ----------------------
-
---------- -
----- -- - --- -----------
----------------- ------------------ ------------------------
---------------------------------------------- ---
-------------- -- -
-----------------
---
-其中，onFileSelected() 方法将用户选择的文件保存到 selectedFile 变量中，onSubmit() 方法将 selectedFile 变量作为请求体发送到服务器。FormData 对象可以方便地将文件和其他表单数据打包成一个请求体。
后端实现
Node.js Express 服务器
在 Node.js Express 服务器中，我们需要使用 multer 中间件来处理上传的文件。代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ---------- --- ------------------- ---------------------- ----- ---- -- - ---------------------- ------------------- --- ---------------- -- -- - ---------------------- ---
其中，multer({ dest: 'uploads/' }) 中间件会将上传的文件保存到 uploads/ 目录下，upload.single('file') 表示只处理名为 file 的文件。req.file 对象包含了上传文件的相关信息。
总结
通过以上步骤，我们就可以在 Angular 8.x 中使用 HttpClient 实现文件上传功能。本文介绍了前端页面和后端 API 的实现方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65caf500add4f0e0ff4c3358