AngularJS 图片上传核心代码示例

本篇文章主要介绍了如何在AngularJS应用中实现图片上传功能，提供了核心代码示例。首先，我们看到HTML部分包含一个`<form>`，其中有一个`<input type="file">`元素，用于选择文件，通过`onchange`事件触发`filesChanged`方法。这个方法在Angular的控制器`uploader`中定义，当用户选择文件后，会将选择的文件对象添加到`files`数组中，并更新视图。 Angular模块`APP`定义了一个自定义指令`fileInput`，它利用Angular的 `$parse`服务将`fileInput`属性绑定到`<input>`元素的`change`事件。当用户选择文件时，指令将文件赋值给`scope`对象，确保数据双向绑定。 控制器`uploader`有两个方法：`filesChanged`和`upload`。`filesChanged`方法接收`elm`参数，即用户选择文件的输入元素，获取`files`属性并将其设置为选择的文件。当文件选择发生变化时，会显示一个警告消息（alert("1")），然后触发`$scope.$apply()`来更新视图。 `upload`方法处理实际的上传操作。首先，创建一个`FormData`对象，遍历`$scope.files`数组，将每个文件添加到`fd`中，键名为'file'。然后，使用`$http.post`方法将`fd`作为数据发送到服务器的`/mgr/album-picture-upload`端点。`transformRequest`选项使用`angular.identity`函数确保原始数据在发送前不进行转换。 总结来说，这篇文档展示了如何在AngularJS中集成文件上传功能，包括使用自定义指令绑定文件选择事件、双向数据绑定以及利用Angular的HTTP服务进行异步上传。开发者需要将这些核心代码片段放入适当的项目结构中，并确保与后端接口正确通信，以完成完整的图片上传流程。