使用 ng-file-upload 将文件从客户端上传到节点并在节点 js 处使用 multer 将文件上传到服务器上，始终获取 req.file 未定义

Question

我正在使用 ng-file-upload 将文件从 Angular 客户端上传到节点 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>

我的控制器：

$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);


        })

    }

Answer 1

您应该将文件作为函数中的参数

$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');
        }
    });
}