在 Web 应用程序中，文件上传是一项常见的任务。在前端开发中 Angular 提供了一个内置的 $http 服务，它可以用于向服务器发送请求并接收响应。在本文中，我们将学习如何使用 Angular 的 $http 服务上传文件。
使用 $http 服务上传文件
我们可以使用 $http 服务向服务器发送 POST 请求，并将文件作为请求体的一部分上传。为此，我们需要创建一个 FormData 对象，并在其中添加文件作为键值对。然后向服务器发送 POST 请求，并将 FormData 作为请求体发送。下面是实现步骤：
- 在 Angular 中引入 $http 服务：在代码中首先引入 $http 服务，代码如下所示：
angular.module('myApp', [])
.controller('myController', function($http) {
// Your code here
});- 创建一个 input 标签：在 HTML 文件中创建一个 input 标签，用于选择文件并触发文件上传事件。代码如下所示：
<input type="file" id="fileToUpload" ng-model="myFile" /> <button ng-click="uploadFile()">Upload</button>
- 监听文件上传事件：在控制器文件中创建一个函数，该函数将在文件上传按钮被单击时被触发。该函数将首先获取 input 标签的文件，并创建一个 FormData 对象。然后，使用 $http 服务将 FormData 作为请求体发送到服务器。代码如下所示：
-- -------------------- ---- -------
----------------- - ---------- -
--- ---- - --------------
--- -------- - --- -----------
----------------------- ------
------------------------- --------- -
----------------- -----------------
-------- ---------------- ----------
--
-------------------- -
-----------------------
--
--------------------- -
-----------------------
---
--在上述代码中，我们使用 $http 服务对象的 post 方法向服务器发送请求并传递 FormData 对象。transformRequest: angular.identity 告诉 Angular 不要将请求体作为 JSON 对象进行序列化。headers: {'Content-Type': undefined} 告诉服务器请求体中的文件是二进制数据，而不是 JSON 或 XML 数据。
示例代码
下面是一个完整的示例代码，包含了 Angular 控制器和 HTML 文件。你可以将该代码拷贝到你的 Angular 应用程序中，并根据需要进行修改。
HTML 文件
-- -------------------- ---- ------- --------- ----- ----- --------- --------------- ------ ----- ---------------- ----------- ------ ------- -- ----------------- ------- ------------------------------------------------------------------------------------ ------- ---------------------- ------- ----- ----------------------------- -------- ------ ------- -- -------------- ------ ----------- ----------------- ----------------- -- ------- --------------------------------------- ------- -------
控制器文件
-- -------------------- ---- -------
----------------------- ---
--------------------------- ---------------- ------ -
----------------- - ---------- -
--- ---- - --------------
--- -------- - --- -----------
----------------------- ------
------------------------- --------- -
----------------- -----------------
-------- ---------------- ----------
--
-------------------- -
-----------------------
--
--------------------- -
-----------------------
---
--
---结论
在本文中，我们学习了如何使用 Angular 的 $http 服务在 Web 应用程序中上传文件。我们使用 FormData 对象来包含文件，然后使用 $http.post 方法将 FormData 作为请求体发送到服务器。我们还学习了如何在请求头中指定请求体的类型。这个技术是非常有用的，在现实世界的 Web 应用程序中，文件上传是一个常见的任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ea652eedcc8a97c8a5c7a