【JS-TASK-09】怎么将图片上传封装成指令？

大家好，我是IT修真院武汉分院第五期的学员汤特，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网js任务9，深度思考中的知识点——怎么将图片上传封装成指令？

1.背景介绍

在js-task-9内，我们需要实现一个将本地图片上传的功能，并且能够进行预览并且将图片的一些属性展示出来。 为了实现这个功能，我们利用所学的angular知识来做一个功能比较简单的图片上传组件。

2.知识剖析

基本的指令：

1.restrict:String:

E:元素 

A:属性(这个是比较推荐的方式) 

C:css类 

M:注释

2.template/templateUrl:模板，（字符串或函数）指令中的一个重要的一个属性，必须被设置其中一种:一段HTML文本；可以接收两个参数的函数，参数为 tElement 和 tAttrs 

3.replace: 默认为false(模板内容会加载到标签内部)，true(模板内容会替换当前标签) 

4.link: link 函数创建可以操作DOM的指令。

图片上传用到的知识点

FileUpload 对象: 

accept 设置或返回指示文件传输的 MIME 类型的列表（逗号分隔）。

id 设置或返回 FileUpload 对象的 id。

name 设置或返回 FileUpload 对象的名称。

type 返回表单元素的类型。对于 FileUpload ，则是 "file" 。

value 返回由用户输入设置的文本后，FileUpload 对象的文件名。

FileReader: 

接口时间onload 成功读取 

readAsDataURL方法：可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术， 可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是， 您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。 它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小， 否则无法读取图像文件。

组件功能

功能：

1.点击按钮上传图片 

2.图片能在本地预览 

3.显示图片信息，显示上传进度 

4.点击上传按钮上传到服务器 

5.点击删除按钮，弹框 

6.上传按钮只能按一次 

3.常见问题

如何实现组件

4.解决方案

查看编码实战的demo

5.编码实战

6.扩展思考

还应该添加一些什么功能

7.参考文献

AngularJS 之 Factory vs Service vs Provider

angular上传获取图片的directive指令

8.更多讨论

怎样优化这个组件？

9.鸣谢

感谢大家观看，也感谢刘思言师兄的帮助

BY : 汤特