发表于: 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里面

<input id="picLogo" type="file" style="display:none" nv-file-select uploader="vm.uploaderLogo">

需要把 nv-file-select 这个指令放在里面

然后这个 uploader 是干嘛的呢,我觉得这个是用于获取整个输入文件的东西,写在controller里面是这样的

vm.uploaderLogo = new FileUploader()

用这个来实例化 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.文件表格部分

<tr ng-repeat="item in vm.uploaderLogo.queue">

这个部分,其实是象征性的遍历下 queue ,我们这个里面只上传一个图片,所以就生成一个了

下面我们就把 item 的属性 双向绑定 渲染到页面

file.name         //文件名称
file.size         //文件大小
progress          //进度条       

其实这个进度条我这里还有点问题,应该把那个callback函数写一下

item.isSuccess       
item.isError

上传成功与否的一个判断

item.upload()

这个函数,就是自带是上传

相当于把 前面那个 FileUploader 里面的三个参数 拼凑出一个http请求

url部分 method部分 formData请求数据

用这三个来直接发一个请求,貌似节省了好多东西


返回列表 返回列表
评论

    分享到