在介绍AngularJS实现图片上传及缩略图展示的知识点前，我们首先要理解AngularJS的基本概念。AngularJS是谷歌开发的一个开源前端Web应用框架，它旨在改善前端开发的体验，是基于MVC架构的一套JavaScript框架。它允许开发者使用HTML作为模板语言，通过增强HTML的属性来将数据绑定到对应的DOM上。接下来，我们将根据文章内容，来详细介绍如何使用AngularJS实现图片上传功能以及如何展示缩略图。
在文章中提到了HTML和JS两大部分代码片段，下面将分别对这两部分的实现进行详细解析。
**HTML部分代码解析**
HTML代码中，首先定义了一个表单，用于提交商品名称、商品网址以及用户留言。而图片上传的部分，则通过`input`元素配合`accept="image/*"`属性来限制只能上传图片格式的文件。使用`ng-repeat`指令循环展示已上传的图片缩略图，并且为每个缩略图设置了点击事件`ng-click="img_del($index)"`，用于删除对应索引的图片。对于上传按钮，使用了`file-model`指令，它是一个自定义指令，用于绑定文件输入的值到`$scope`对象上。`onchange`事件调用了`img_upload`函数，该函数在JavaScript部分定义，用于处理图片上传的逻辑。
**JavaScript部分代码解析**
在JavaScript部分，首先创建了一个控制器`controlName`，并注入了`$scope`和`$http`服务。通过`$scope`对象来实现控制器和视图之间的数据绑定。`$scope.reader`是一个FileReader接口的实例，用于读取本地文件系统中的文件，将图片文件转换为Base64编码的数据。`$scope.form`对象用于存储表单数据，包括上传的图片。`$scope.thumb`用于存储上传的图片缩略图信息，`$scope.thumb_default`则用于存储默认图片信息。
`img_upload`函数是一个关键函数，它在文件上传时触发。函数使用当前时间戳作为键名，生成一个唯一的标识。然后使用`$scope.reader.readAsDataURL`方法读取文件，将图片文件转换为Base64编码的数据。在`onload`事件中，使用`$scope.$apply`方法将转换后的数据保存到`$scope.thumb`对象上。为了将数据提交到服务器，创建了`FormData`对象，将图片以及生成的标识一并添加到`FormData`中，然后使用`$http`服务发起POST请求。
在服务器端处理成功后，通过`$http`的`success`回调函数，将服务器返回的数据保存到`$scope.form.image`对象中，并更新`$scope.thumb`中对应项的状态。
文章中还提到了使用OCR（光学字符识别）扫描技术，将文档的图片转化为文字并进行文字识别。这与我们讨论的主题相关性不大，但展示了AngularJS及其他技术如何与图像处理技术相结合，提高工作效率。
总结以上，通过AngularJS实现图片上传及缩略图展示，需要在HTML中定义相关表单元素，并通过`ng-repeat`指令来循环展示图片缩略图。在JavaScript中，需要编写相应的控制器逻辑，使用FileReader接口来读取和转换图片数据，通过自定义指令来实现文件模型的绑定。同时，需要与后端服务进行交互，处理文件上传，并将结果反馈到前端展示。通过这样的实现，用户可以方便地上传图片，并在网页上以缩略图的形式展示图片。
