Angular JS Express JS文件上传抛出错误,undefined不是函数

时间:2015-09-16 21:24:30

标签: javascript angularjs node.js express

这是我在控制台上的错误

TypeError: undefined is not a function
    at C:\nodefiles\new\server.js:101:16
    at Layer.handle [as handle_request] (C:\nodefiles\new\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\nodefiles\new\node_modules\express\lib\router\route.js:131:13)
    at done (C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:36:7)
    at indicateDone (C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:40:51)
    at C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:142:11
    at WriteStream.<anonymous> (C:\nodefiles\new\node_modules\multer\storage\disk.js:43:9)
    at WriteStream.emit (events.js:129:20)
    at finishMaybe (_stream_writable.js:484:14)
    at afterWrite (_stream_writable.js:362:3)
    at onwrite (_stream_writable.js:352:7)
    at WritableState.onwrite (_stream_writable.js:105:5)
    at fs.js:1799:5
    at FSReqWrap.strWrapper (fs.js:568:5)

这是我的HTML页面

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <style>

        .thumb {
            width: 24px;
            height: 24px;
            float: none;
            position: relative;
            top: 7px;
        }

        form .progress {
            line-height: 15px;
        }


        .progress {
            display: inline-block;
            width: 100px;
            border: 3px groove #CCC;
        }

        .progress div {
            font-size: smaller;
            background: orange;
            width: 0;
        }
    </style>
</head>
<body ng-app="fileUpload" ng-controller="MyCtrl">
<h4>Upload on file select</h4>
<button ngf-select="uploadFiles($files)" multiple
        accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
    Select Files</button>
<br><br>
Files:
<ul>
    <li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}
      <span class="progress" ng-show="f.progress >= 0">
        <div style="width:{{f.progress}}%"
             ng-bind="f.progress + '%'"></div>
      </span>
    </li>
</ul>
{{errorMsg}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="controller3.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
</body>


</html>

这是我的控制器

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

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadFiles = function(files) {
        $scope.files = files;
        angular.forEach(files, function(file) {
            if (file && !file.$error) {
                file.upload = Upload.upload({
                    url: '/api/data',
                    file: file
                });

                file.upload.then(function (response) {
                    $timeout(function () {
                        file.result = response.data;
                    });
                }, function (response) {
                    if (response.status > 0)
                        $scope.errorMsg = response.status + ': ' + response.data;
                });

                file.upload.progress(function (evt) {
                    file.progress = Math.min(100, parseInt(100.0 *
                        evt.loaded / evt.total));
                });
            }
        });
    }
}]);

这是我在服务器端的代码

var multer = require('multer');
var upload = multer({
    dest: __dirname + '/public',
});

app.post('/api/data', upload.single('file'), function (req, res, next) {
    console.log("We are here fellas");
    return res.ok();
});

我认为这个问题是因为最后提到的那个我在后端编写代码的东西。我正在学习几个教程,因为我是这个主题的新手。

我正在关注Danial Farid的github,他做了那个nf-fileupload的事情。

请帮我解决此错误。

  

对不起,如果我听起来很愚蠢,我是新来的。

我不知道这是否有必要,但这是我在选择文件后在前端出现的错误(在Google Chrome开发者控制台中)

angular.js:10661 POST http://localhost:1339/api/data 500 (Internal Server Error)

1 个答案:

答案 0 :(得分:1)

以下行错误:

return res.ok();

这不是响应对象的expressjsnodejs函数。 应该是这样的:

res.status(200).send('OK');