Question

请帮帮我我对此感到陌生，对于文件上传，我提到了这一点 - http://goodheads.io/2015/06/22/handling-file-uploads-using-angularjs-node-and-express/

我的实施如下。我删除了一些东西，以确保帖子大小足够可读。主要问题是只有文件上传部分，除了一切都像魅力一样。请帮忙。

这是index.html部分。

<!doctype html>
<html ng-app ="myApp">
<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">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<table width="500" border="2" cellspacing="2" cellpadding="2">
 <form>
  <tbody>
 <tr>
      <td><input type="file" ng-file-select="fileSelected($files)" accept="'image/*'"></td>
      <td><input type="submit" ng-click="uploadFile()" ></td>
    </tr>

  </tbody>
</form>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="controller.js"></script>
<script type="text/javascript"  src="../bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script>
<script type="text/javascript" src="../bower_components/ng-file-upload-shim/ng-file-upload.js"></script> 
</body>
</html>
<form></form>

这是指导文件的控制器。

var myApp = angular.module('myApp', ['angularFileUpload']);

myApp.controller('AppCtrl', ['$scope', '$http', 'upload', function($scope, $http, $upload) {
    console.log("Hello World from controller");

    $scope.addData = function() 
    {
        console.log($scope.user);
        console.log("whore");
        $http.post('../addData', $scope.user).success(function(response) {
        console.log(response);
     });

     $scope.fileSelected = function(files) 

     {
        if (files && files.length) {
            $scope.file = files[0];
        }

     $upload.upload({
       url: '../upload',
       file: $scope.file
     })
     .success(function(data) {
       console.log(data, 'uploaded');
      });   


     };
};

}]);

请忽略它的第一个功能，但我的问题是别的。

现在这里是服务器代码，我用multer来做这个技巧。

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var multer = require('multer');
var validator = require('node-mongoose-validator');
var bodyParser = require('body-parser')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }))
app.use(multer({ 
 dest: './uploads/'
}));

app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());

服务器文件很大，因此我没有在这里添加所有路由和所有部分。当我删除具有upload命令的部分时，它会正常运行，但是当我添加它时，会显示错误。

C:\nodefiles\new\node_modules\express\lib\application.js:209
    throw new TypeError('app.use() requires middleware functions');
          ^
TypeError: app.use() requires middleware functions
    at EventEmitter.use (C:\nodefiles\new\node_modules\express\lib\application.js:209:11)
    at Object.<anonymous> (C:\nodefiles\new\server.js:9:5)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Answer 1

multer({dest: './uploads/'})本身不会返回中间件函数。您必须使用multer类的一个函数来获取中间件函数。

所以你最终会像multer({...}).single()一样使用它。这里描述了不同的功能 - https://github.com/expressjs/multer#singlefieldname。

Multer doc有正确用法的好例子：https://github.com/expressjs/multer#usage

要保存点击，这是一个完整的工作示例：

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

app.post('/api/data', upload.single('filenameInTheForm'), function (req, res, next) {
    return res.ok();
});

重要的是要注意filenameInTheForm必须与multipart/form-data请求中的字段名称匹配。

此外，使用app.use(..)和上述方式略有不同。 app.use()将导致为每个端点执行中间件，幸运的是，如果内容类型不是multipart/form-data，则中间件不执行任何操作。为了避免它仍然执行内容类型检查这一事实的轻微开销，使用它比上面的示例更好。

Angular JS Express JS Node JS文件上传问题

1 个答案: