怎么将图片上传封装成指令？

大家好，我是IT修真院郑州分院第6期的学员王栋，一枚正直、纯洁、善良的前端程序员今天给大家分享一下，修真院官网js任务九深度思考中的知识点——怎么将图片上传封装成指令？

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

1.背景介绍

在js-task-9内，我们需要实现一个将本地图片上传的功能，并且能够进行预览并且将图片的一些属性展示出来。

为了实现这个功能，我们利用所学的angular知识来做一个功能比较简单的图片上传组件。

2.知识剖析

基础知识

关于指令，因为我们是有直接讲指令的小课堂的，所以这里就简单说一下。

angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。

内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间 都使用ng作为前缀，所以在写自定义指令的时候，避免用ng作为指令命名的前缀。

创建指令的方式有四种，在指令里用 restrict属性控制:E:元素A:属性(这个是比较推荐的方式)C:css类M:注释

向指令中传递数据，用template属性

组件功能

功能：

点击按钮上传图片

图片能在本地预览

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

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

点击删除按钮，删除。

上传按钮只能按一次

3.常见问题

如何实现组件

4.解决方案

使用angularjs的指令封装

5.编码实战

多说无益，来看代码 demo

6.扩展思考

还应该添加一些什么功能

还应该添加上传的文件是否是图片的验证。

7.参考文献

FileReader : EventTarget

文件和二进制数据的操作

8.更多讨论

Q1：图片上传可以限制图片大小吗？A1:王栋：可以啊，有一个size的属性，可以设置size的大小，单位为byte。Q2：为什么要讲图片上传封装成指令？A2：王栋：因为封装成指令之后就可以随时调用了，剥离开来，提高效率。Q3：封装指令的 时候的难点在哪里？A3：王栋：难点就在于把 封装的原理和方法弄明白，尤其是作用域和link函数。
PPT


怎么将图片上传封装成指令？