angular-file-upload

angular-file-upload 是AngularJs框架的一个模块。能够处理文件上传的相关操作，包括选择要上传的文件，筛选要上传的文件或是显示上传的进度等。

---

一，使用的准备。

1，包的安装。

在命令行中输入相关指令就可以安装。

npm install angular-file-upload

或是

bower install angular-file-upload

2，模块的依赖。

在总的 angular 模块中注入依赖。

var app = angular.module('myApp', ['angularFileUpload']);

---

二，常用API介绍。

1，指令。

（1）， nv-file-select
该指令必须和 <input type='file'/> 的标签结合使用。然后会在页面上显示一个用于选择文件的按钮，点击时会弹出一个文件目录可供选择。

基本的使用格式是：

<input type="file" nv-file-select uploader="{FileUploader}"/>

其中属性 uploader 的值必须是 FileUploader 的实例。

（2 ）nv-file-drop
在某个标签上使用了该指令之后，就能将某个文件拉到该标签的区域，文件就能被添加到上传的队列中。

基本使用格式是：

<element nv-file-drop uploader="{FileUploader}"></element>

其中 uploader 属性也是 FileUploader 的实例。

（3）nv-file-over
可以将该指令添加在当文件被拉到某个区域的时候类会改变的标签之上。默认情况是为标签添加一个 nv-file-over 类。但也可以通过在添加 nv-file-over 的标签之上再添加一个属性 over-class='classname' 来指定添加特定的类。

基本使用格式是：

<element nv-file-over uploader="{FileUploader}"></element>

---

2，服务。

服务 FileUploader 主要用于管理文件上传队列以及要上传的文件。

---

3，类。

（1）FileUploader
主要的属性有：

属性名	描述
url	上传文件时服务器解析文件上传请求的url
queue	准备上传文件的队列
progress	文件上传队列中文件上传的进度
filters	对要上传文件进行筛选的选择器
method	上传文件时向服务器发送请求的方法，默认为 POST 。
isUploading	当文件在上传时值为 true 。

这些属性在实例化 FileUploader 可以进行设置。举个简单的例子：

$scope.uploader = new FileUploader({
            url: '/upload',
            method: 'post'
        });

主要的方法有：

方法	描述
uploadAll	上传所有在上传队列的文件
cancelAll	取消所有当前的文件上传

这些方法可以在 html 页面中调用，结合 ng-click 使用。一个简单的例子：

<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                            <span class="glyphicon glyphicon-upload"></span> Upload all

主要的回调函数有：

回调函数	描述
onSuccessItem	在某个文件成功上传后调用
onErrorItem	在某个文件上传失败后调用

这些回调函数可以在 controller 中使用。一个简单的例子：

.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
        var uploader = $scope.uploader = new FileUploader({
            url: 'upload.php'
        });
        // CALLBACKS
        uploader.onSuccessItem = function(fileItem, response, status, headers) {
            console.info('onSuccessItem', fileItem, response, status, headers);
        };

（2）FileItem
该类也有类似 FileUploader 类的属性，方法以及回调函数。

---

4，选择器。

用于对将要上传文件进行筛选。在 controller 中定义有关的 filter ，然后再 html 中结合 nv-file-select 和 nv-file-drop 使用。

在控制器中定义的简单代码如下：

.controller('AppController', function($scope, FileUploader){
        $scope.uploader = new FileUploader({
            filters: [{
                name: 'filter1',
                fn: function(item, option) {
                    return this.queue.length < 2;
                }
            }]
        });
    })

在 html 中使用的简单例子：

<input type="file" nv-file-select uploader='uploader' filters='filter1'/>

其中 html 标签中的 filters 属性的值是一个字符串，就是我们在控制器中定义的选择器的名称。

---

更多关于 angular-file-upload 模块的API可以在其github的wiki上查到。 模块API

---

三，服务端的处理。

在服务端，我们可以处理客户端上传文件的请求，并将要上传的文件重命名并保存在指定的文件目录之下。

在这里，我们可以利用一个 npm 包 multiparty ，用来将要上传的文件重命名以及保存到指定的文件目录之下。该包的详细信息可以在 npm 官网中了解到。 multiparty包介绍

以下是使用 express 框架构建的简单服务器代码。通过他可以大概了解如何在一个 express 服务器中处理与文件上传有关的操作。

var express = require('express');
var app = express();
var multiparty = require('multiparty');
var util = require('util');
var fs = require('fs');

app.use(express.static('./'));

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

app.post('/upload', function(req, res){
    //生成multiparty对象，并配置上传目标路径。
    var form = new multiparty.Form({uploadDir: './uploads/'});

  //上传完成后处理，例如重命名上传文件名。
    form.parse(req, function(err, fields, files) {

        var filesTmp = JSON.stringify(files, null, 2);

        if (err) {
            console.log('parse error: ' + err);
        } else {
            console.log('parse files: ' + filesTmp);
            var inputFile = files.file[0];
            var uploadedPath = inputFile.path;
            var dstPath = './uploads/' + inputFile.originalFilename;

      //重命名为真实文件名。
            fs.rename(uploadedPath, dstPath, function(err) {
                if (err) {
                    console.log('rename error: ' + err);
                } else {
                    console.log('rename ok!');
                }
            });
        }

    //将上传的文件存到指定的文件目录之下。
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload: \n\n');
        res.end(util.inspect({fields: fields, files: filesTmp}));

    });

});

app.listen(3000, function(){
    console.log('listen on 3000');
});

---

我实现的一个上传文件的小实例。github地址

参考资料： angular-file-upload 文档， 网友贴吧 。