发表于: 2017-06-01 20:04:08
1 1138
今天完成的任务
1.公司编辑/新建页面 50%
明天的计划
1.公司编辑页面啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
2.职位列表
遇到的问题
每次遇到一个新的插件,用起来都很吃力,看不懂文档,很尴尬,我可怜的英语水平
收获
angular 图片上传插件
这个插件,看起来是很简单,结果用的时候,真的很迷茫
下面是这个插件我用到的一点东西
1.首先引用这个插件
<script src="frame/angular-file-upload.js"></script>
2.angular里面注入一下
3.lable里面
需要把 nv-file-select 这个指令放在里面
然后这个 uploader 是干嘛的呢,我觉得这个是用于获取整个输入文件的东西,写在controller里面是这样的
用这个来实例化 FileUploader ,这个东西有很多属性
url {String}: 这个url,就是上传图片的接口url
alias {String}: Name of the field which will contain the file, default is file
queue {Array}: 这个是个队列,上传文件的队列
progress {Number}: 只读的一个属性,上传文件的进度
headers {Object}: 请求的头部???
formData {Array}: 这个是上传的时候我们需要的 formData 数据
filters {Array}: 过滤器,设定一些规则,通过的这些规则的才能被上传
autoUpload {Boolean}: 自动上传?这是个啥
method {String}: http的方法,默认是POST
removeAfterUpload {Boolean}: 上传之后是否删除文件,传一个布尔值
isHTML5 {Boolean}: 只读,就是判断是否是 html5
isUploading {Boolean}: ???
queueLimit {Number} : 上传文件的最大 大小 的限制
withCredentials {Boolean} : ????
4.文件表格部分
这个部分,其实是象征性的遍历下 queue ,我们这个里面只上传一个图片,所以就生成一个了
下面我们就把 item 的属性 双向绑定 渲染到页面
其实这个进度条我这里还有点问题,应该把那个callback函数写一下
上传成功与否的一个判断
这个函数,就是自带是上传
相当于把 前面那个 FileUploader 里面的三个参数 拼凑出一个http请求
url部分 method部分 formData请求数据
用这三个来直接发一个请求,貌似节省了好多东西
评论