1.背景介绍
在js-task-9内，我们需要实现一个将本地图片上传的功能，并且能够进行预览并且将图片的一些属性展示出来。
为了实现这个功能，我们利用所学的angular知识来做一个功能比较简单的图片上传组件。
2.知识剖析
1.基础知识
关于指令，因为我们是有直接讲指令的小课堂的，所以这里就简单说一下。
1.angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。
2.内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间都使用ng作为前缀，所以在写自定义指令的时候，避免用ng作为指令命名的前缀。
3.创建指令的方式有四种，在指令里用restrict属性控制
E：元素
A：属性（这个是比较推荐的方式）
C：css类
M：注释
4.向指令中传递数据，用template属性
template: '{{ myLinkText }}'
templateurl: 'index.html'
第一种是直接把对应的字符串输入给指令
第二种是适合指令部分html比较复杂的情况，可以把指令的内容写到一个html文件内，通过url传给指令
2.组件分析
功能：
1.点击按钮上传图片
2.图片能在本地预览
3.上传后能够在本地预览，显示图片信息，显示上传进度
4.点击上传按钮上传到服务器
5.点击删除按钮，删除图片，图片信息一并消失，有个弹框
3.常见问题
怎么实现上述功能
4.解决方案
a.文件结构
如下所示，因为比较简单，js文件就写在一个app.js里面了。upfile里面写的是指令的模板
文档结构
b.创建指令
directive里面
index.html中的指令标签
指令模板
c,创建服务，服务里面是操作数据的逻辑
定义一些私有变量，然后定义一些方法，在link函数里面调用这些函数，就可以获得相应的数据
先定义servicce和一些基本私有变量
把获取数据的方法也写在这里
获取进度的方法
获取图片的base64码，用于预览d.link函数
在link函数里面操作dom，定义三个事件，一个监控input的change事件，两个对应上传和删除按钮的click事件
5.编码实战
6.扩展思考
a.还应该添加一些什么功能
我觉得应该添加一个对于file类型的判定，在上传的不是图片格式的文件时报错
7.参考文献
AngularJS 之 Factory vs Service vs Provider
angular上传获取图片的directive指令
8.更多讨论
怎样优化这个组件，增强组件的复用性，使之可以应用到项目中。
PPT链接：https://ptteng.github.io/PPT/PPT/JS-9-upload-pic.html#/
视频链接：https://v.qq.com/x/page/i0502rln76j.html
实现上传图片的指令_腾讯视频
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论