angular-file-upload使用笔记

引入

github
Bower:

1
2
bower install ng-file-upload-shim --save(for non html5 suppport)
bower install ng-file-upload --save

构建表单

1
2
3
4
5
6
7
8
<form name='test'>
<div class="btn btn-default " ngf-select ng-model="upload_img"
name="upload_img" ngf-pattern="'image/*'" ngf-accept="'image/*'"
ngf-max-size="2MB" ngf-min-height="100">Select
</div>
<button ng-click='submitForm(upload_img)'>
</button>
</form>

在文档中看见,可以用input,button,div等方式来构建,但是我推荐用Button,因为可以自己设置样式.

使用

其中div标签必须的是 ngf-select与ng-model和name这三个属性.其他的都是可选性,如果你上传的是图片,你可以用ngf-thumbnail来预览.
并且可以在ngf-thumbnail中嵌入其他数据
比如

1
<img ngf-thumbnail="upload_img||user_info.avatarUrl" class="" alt="" width="100" height="100"/>

如何在controller获取到

推荐在提交的时候传递参数,这里我已经躺了一个坑了,官方加了一个$号,我这里用$upload_img没用

1
2
3
4
5
6
<button ng-click='submitForm(upload_img)'>
</button>
$scope.submitForm=function(upload_img){
console.log(upload_img)
}

上传文件

这里只演示单文件上传,其实上传也挺简单的.采用POST上传
Upload需要在controller注入.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$scope.submitForm=function(_upload_img){
Upload.upload(
{
url: '/api/user/'+$stateParams.id,
data: {file: _upload_img, 'user_info': $scope.user_info},
method:'POST'
}).then(function (data) {
data=data.data
if(data.err){
$scope.user_err=data.err
$timeout(function(){
$window.location.reload()
},1500)
}else{
$scope.user_err=data.info
$timeout(function(){
$window.location.reload()
},1500)
}
});
}

这里的url为post地址,后面的then可以接受几个function,第一个是成功,第二个是失败,第三个是事件触发,具体可以参考官网

nodejs获取

这里顺便把这个坑给说了.

引入 multer

1
2
3
4
5
6
7
8
9
10
11
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/upload/avatar/')
},
filename: function (req, file, cb) {
cb(null,Date.now()+'-'+file.originalname)
}
})
var upload = multer({ storage: storage })
var upload_avatar=upload.single('file')

具体的大家可以去看一下multer官网文档,这里简单说说.
storage是定义存储的一些相关信息,destination为存储地址,filename为存储名字
那么upload.single就比较重要了,这点就是定义需要解析的body段.
在upload上传的时候我们在其中附加了一个字段 也就是file:_upload_img,也就是file这个字段就需要被multer来解析,解析后我们就可以拿到file了

获取file

1
2
3
app.post("/api/xxxxxx",function(req,res){
console.log(req.file)
})

即可以拿到里面的文件了.
目前就这么多吧.有坑再填