angular上传图片

动画

上传图片-客户端

ng-file-upload

1. 安装

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

2. 导入js文件

   <script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
   <script src="ng-file-upload(.min).js"></script>

3. 加入依赖模块

angular.module('personalZhaoPin',['ngFileUpload']);

4. 前端页面

```

<img ngf-src="data.file || data.defaultImage" class="img-responsive"/>
<div class="button" ngf-select="" ngf-pattern="'image/*'" ngf-multiple="false" ng-model="data.file">
选择文件
</div>
<button ng-click="upload()">upload</button>

```

5. 控制器代码

```
$scope.data = {
    file: null
};
$scope.upload = function () {
    if (!$scope.data.file) {
        return;
    }

    var url = $scope.params.url;  //params是model传的参数，图片上传接口的url
    var data = angular.copy($scope.params.data || {}); // 接口需要的额外参数，比如指定所上传的图片属于哪个用户: { UserId: 78 }
    data.file = $scope.data.file;

    Upload.upload({
        url: url,
        data: data
    }).success(function (data) {
        $scope.hide(data);
    }).error(function () {
        logger.log('error');
    });
};
```

图片剪切

1. 安装

   bower install ngImgCrop

2. 导入文件

   <script src="ng-img-crop.js"></script>
   
   <link rel="stylesheet" type="text/css"  href="ng-img-crop.css">

3. 指令参数

    <img-crop
    image="{string}"                 //需要截取的图片变量名
    result-image="{string}"          //截取后所赋值的变量名
   [change-on-fly="{boolean}"]       //是否实时更新用户截取图像的预览,若为否,则会等用户停止动作后更新预览的图像
   [area-type="{circle|square}"]     //截取图像框的形状(圆形或正方形)
   [area-min-size="{number}"]        //截取图像框的最小面积
   [result-image-size="{number}"]    //截取后图像的大小
   [result-image-format="{string}"]  //截取后图像的格式
   [result-image-quality="{number}"] //截取后图像的质量
   [on-change="{expression}"]        
   [on-load-begin="{expression"]
   [on-load-done="{expression"]
   [on-load-error="{expression"]
></img-crop>
>
>

#### 服务器端代码
1. 安装formidable

    npm intall formidable --save
2. post 路由代码

var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
    if (err) {
        response.locals.error = err;
        // response.render("uploads");
        return;
    }

    userDAO.getUserById(fields.email,function (rr) {
        if(rr[0].num==1){
            res.send('用户已存在');

        }else{
            console.log("fields>>>"+JSON.stringify(fields));
            // console.log("file------"+util.inspect(files));
            //     for(file in files){
            //         console.log("file>>>>>"+file);
            //     }

var extName ='';  //后缀名
console.log('files.in_file.type: '+files.fileImage01.type);
switch (files.fileImage01.type) {  //此处in_file  为页面端 <input type=file name=in_file>
    case 'image/jpeg':
        extName = 'jpeg';
        break;
    case 'image/jpg':
        extName = 'jpg';
        break;
    case 'image/png':
        extName = 'png';
        break;
    case 'image/x-png':
        extName = 'png';
        break;
}

if(extName.length == 0){
    res.send('只支持png和jpg格式图片');
    return;
}else{
    form.uploadDir = "../public"+AVATAR_UPLOAD_FOLDER;     //设置上传目录
    form.keepExtensions = true;     //保留后缀
    form.maxFieldsSize = 2 * 1024;   //文件大小
    console.log('here');
    var avatarName = createUnique.creatName() + '.' + extName;
    var newPath = form.uploadDir + avatarName;
    fs.renameSync(files.fileImage01.path, newPath);  //重命名
    var user={};
    user.email=fields.email;
    user.password=fields.password;
    user.user_icon=avatarName;
    userDAO.regist(user,function (_result) {
        if(_result.affectedRows==1){
            res.send('uploads success');
        }else {
            res.send('uploads fail');
        }

        console.log("add img ---end");
    })

}

        }
    })


});
```