angular-file-upload的使用总结

组件地址：https://github.com/nervgh/angular-file-upload
第一次使用这个组件，感觉这个组件的api在介绍略微简单，所以尝试了一会儿才成功。

这边我需要的功能是：
1.只能导入xls。
2.可以选择文件。
3.可以拖动文件上传。
4.上传过程中显示process。

html页面部分code

<div class="drop-file" nv-file-drop="" uploader="uploader" filters="uploadeFilter">
    <input type="file" nv-file-select uploader="uploader" alt="" title="" filters="uploadeFilter" class="fileInput" id="fileInput" />
    <div class="action-message"><img src="assets/localImages/XLS.svg" class="xls-image"> To attach files drag & drop here or<span class="file-input-link" ng-click="openFileInput()">select files from your computer...</span></div>
    <div class="file-process">
        <div class="process">
            <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.queue[0].progress + '%' }" style="width: 0%;"></div>
        </div>
        <div class="file-Name">{{uploader.queue[0].file.name}}</div>
    </div>
</div>

controller 部分code
首先需要在模块依赖中引入FileUploader

//alias 表示对面的后端file参数的名字,url表示所要call的api路径,headers里面可以加入各种http请求参数，如常用的token的值，formData表示在这个http请求中你还想附带的数据对象。这几个参数是我感觉在这个上传文件中比较重要的，几乎都要用到的。
$scope.uploader = new FileUploader({
    alias: "xlsFile",
    url: 'localhost:8080/api/xls',
    headers: {
      'x-xsrf-token': ''
    },
    formData: [{
      id: $state.params.id
    }]
 });
//filter是对你上次文件的过滤进行的处理，过滤非xls文档，这个功能是在所有功能之前执行。在Html中配置filters="uploadeFilter"
$scope.uploader.filters.push({
        name: 'uploadeFilter',
        fn: function (item, options) {
            var suffix =   item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length);
          return suffix === 'xls' || suffix === 'xlsx' ? true : false;
        }
      });
 //onAfterAddingFile是在文件选择之后触发的事件，由于我这边没有upload按钮，而是在文件选择之后就上传文件，所以需要直接触发upload事件，而且是只有一个文件。
$scope.uploader.onAfterAddingFile = function (fileItem) {
        if ($scope.uploader.queue.length === 2) {
          $scope.uploader.queue[0].remove();
        }
        setTimeout(function () {
          $scope.$apply();
          $scope.uploader.queue[0].upload();
        }, 400);
      };

angular-file-upload的FileUploader 的实力对象:
我们每次上传一个文件,对应的scope.uploader.queue的数组后面就会添加一个该文件的数据对象，这个list是所有文件的list,每个item中包含文件的上传进度process等属性, scope.uploader.process表示所有文件的上传进度。