使用ng-file-upload将文件从客户端上传到节点,并在节点js上进行multer以在服务器上上传文件,获取req.file undefined always

时间:2018-04-17 08:45:14

标签: javascript angularjs node.js

我正在使用ng-file-upload将文件从角客户端上传到节点js,而在服务器端我使用multer上传,问题是我没有在multer中收到任何错误但文件没有上传,我发现req .file总是未定义。提前谢谢。 我正在分享我的代码:

观点:

 <form name="uploadform" role="upload" enctype="multipart/form-data" ng-submit="uploadFile();">
  <input type="file" placeholder="Browse" class="btn btn-sm btn- 
default" accept="application/pdf,application/msword,application/excel" 
ngf-select="onFileSelect($files)">
</form>

myController的:

$scope.onFileSelect = function($files) {
        $scope.uploadfile = $files;
        console.log("onFileSelect $scope.uploadfile is "+$scope.uploadfile);
        for (var i = 0; i < $files.length; i++) {
          var $file = $files[i];
          console.log("$file name is "+$file.name);
          console.log("$file type is "+$file.type);
          console.dir("$file is "+$file);
        }
    }

    //After click on  upload button following method get called and fot that Upload here is ng-upload-file
$scope.uploadFile = function(){
    Upload.upload({
        url: hostname+'/upload',
        //file:$scope.uploadfile[0], //webAPI exposed to upload the file
        data:{file:$scope.uploadfile[0]} //pass file as data, should be user ng-model

    }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
        //upload function returns a promise
        if(data.data.error_code === 0){ //validate success
            $window.alert('Success ' + data.config.data.file.name + 'uploaded. Response: ');
        } else {
            $window.alert('an error occured');
        }
    });
}

路由:

    router.post('/upload',upload1);

在app.js中:

    var multer = require('multer');

    var storage = multer.diskStorage({ //multers disk storage settings
        destination: function (req, file, cb) {
            console.log("come inside storage destination"+" file is "+file);
            cb(null, './uploads/')
        },
        filename: function (req, file, cb) {
            var datetimestamp = Date.now();
            console.log("come inside filename");
            cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1])
        }
    });

    var upload = multer({ //multer settings
                        storage: storage
                    }).single('file');*/


    upload1: function(req, res) {

        req.headers['content-type'] = 'multipart/form-data; boundary=something';
        res.setHeader('Content-Type', 'applicaton/json');

        /** API path that will upload the files */

        console.dir("req is "+req);


        req.headers['content-type'] = 'multipart/form-data; boundary=something';
        res.setHeader('Content-Type', 'applicaton/json');
        upload(req,res,function(err){
            if(err){
                 res.json({error_code:1,err_desc:err});
                 return;
            }
            res.json({error_code:0,err_desc:null});

            console.log("req.file" +req.file);


        })

    }

1 个答案:

答案 0 :(得分:0)

您应该将该文件作为函数

中的参数
$scope.uploadFile = function(file){
    Upload.upload({
        url: hostname+'/upload',
        //file:$scope.uploadfile[0], //webAPI exposed to upload the file
        data:{file:file} //pass file as data, should be user ng-model

    }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
        //upload function returns a promise
        if(data.data.error_code === 0){ //validate success
            $window.alert('Success ' + data.config.data.file.name + 'uploaded. Response: ');
        } else {
            $window.alert('an error occured');
        }
    });
}