Angularjs+Nodejs图片上传

1.插件

  (1) ：angular插件 ng-file-upload

  (2) : nodejs插件connect-multiparty

 

2.html

<input type="file"  ngf-select ng-model="files" ngf-multiple="true" />

3.配置

var app = angular.module('fileUpload', ['ngFileUpload']);
可以参考https://github.com/danialfarid/ng-file-upload

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });
    // set default directive values
    // Upload.setDefaults( {ngf-keep:false ngf-accept:'image/*', ...} );
    $scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                Upload.upload({
                    url: 'url',   //此处url为向后台nodejs请求的路由
                    fields: {'username': $scope.username},
                    file: file
                }).progress(function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                }).error(function (data, status, headers, config) {
                    console.log('error status: ' + status);
                })
            }
        }
    };
}]);

 

4.nodejs

后台接收的数据是存在于临时文件夹内。因此使用fs.rename()有肯能会报错。（我这边是确确实实报错了）

var multipart = require('connect-multiparty');
var fs = require('fs');
var multipartMiddleware = multipart();






  //此处'/url'应与angular发送的路由一致，
  router.post('/url', multipartMiddleware,function(req, res, next){
        
     var profile_image = req.files.file;
     var tmp_path = profile_image.path;  //此处为页面图片存放的地址，在C盘的临时文件夹temp下。   
     console.log(req.files);
     var path = './url' + profile_image.name;  //此处'./url'为上传的图片希望存放的地址.可以为绝对地址
          
            //跨域传递文件
            var is = fs.createReadStream(tmp_path);
            var os = fs.createWriteStream(path);
                is.pipe(os);
                is.on('end',function() {
                    fs.unlinkSync(tmp_path);
                });
            //跨域传递文件
       //-----------此处可以写点传递回前台的数据   --------此处不完整，不能完全照搬。如果写全的话，太麻烦。
  });

 

     从最开始的不懂，到后面逐渐把坑填满，花费了太多时间。里面的坑着实不少，能走通一次后，回头再看，代码量就那么点。写一下我犯过的错误吧.

    1.插件版本错误。之前的插件貌似叫做angular-file-upload.悲催的我拿着ng-file-upload，却用angular-file-upload的写法。

    2.angular-file-upload需要在用到的congtroller加载'$upload'，而ng-file-upload加载'Upload'.

    3.angular-file-upload加载中间件的名称是['angularFileUpload'],而ng-file-upload加载['ngFileUpload']

    4.nodejs接收不到 req.files.file.一个原因是nodejs插件选择有问题,还有一个原因是插件的写法有问题.个人倾向于使用connect-multiparty.

    5.nodejs的fs.rename()方法报错。猜测：因为上传的图片存在于C盘的临时文件夹内，可能涉及到系统权限的问题导致fs.rename()方法报错。所以，从网上搜了一个跨域读取文件的方法。