引入

github Bower:

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

构建表单

<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中嵌入其他数据比如

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

如何在controller获取到

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

<button ng-click='submitForm(upload_img)'> 
</button> 

$scope.submitForm=function(upload_img){ 
   console.log(upload_img) 
} 

上传文件

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

$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

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

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

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