我正在通过Mongo / Node / Express示例来帮助我理解全栈项目的各个部分是如何组合在一起的。该应用程序非常简单：快速服务器发送用户可用于上传图片的页面。图片已保存，用户可以使用该网站查看上传的图片并查看各种统计数据。
我还没有开始实现与持久性或Mongo相关的任何事情，所以我很确定这不是问题（这可能意味着它）。我正在使用这些框架/包：
Node.js：0.10.33
Bower：1.3.12
当我尝试在网站上传图像文件时，我无法弄清楚错误。当我选择一个图像文件并点击“提交”时，我在浏览器中收到以下错误...
Connect
500 TypeError: Cannot read property 'file' of undefined
at saveImage (/home/dan/development/tuts-book/controllers/image.js:47:37)
at module.exports.create (/home/dan/development/tuts-book/controllers/image.js:66:9)
at Layer.handle [as handle_request] (/home/dan/development/tuts-book/node_modules/express/lib/router/layer.js:82:5)
at next (/home/dan/development/tuts-book/node_modules/express/lib/router/route.js:100:13)
at Route.dispatch (/home/dan/development/tuts-book/node_modules/express/lib/router/route.js:81:3)
at Layer.handle [as handle_request] (/home/dan/development/tuts-book/node_modules/express/lib/router/layer.js:82:5)
at /home/dan/development/tuts-book/node_modules/express/lib/router/index.js:235:24
at Function.proto.process_params (/home/dan/development/tuts-book/node_modules/express/lib/router/index.js:313:12)
at /home/dan/development/tuts-book/node_modules/express/lib/router/index.js:229:12
at Function.match_layer (/home/dan/development/tuts-book/node_modules/express/lib/router/index.js:296:3)
这是我正在使用的代码：
的package.json
{
"name": "tuts-book",
"version": "1.0.0",
"description": "Working example from Web Development with MongoDB and Node.js.",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Dan Schatz",
"license": "ISC",
"dependencies": {
"body-parser": "^1.10.1",
"cookie-parser": "^1.3.3",
"errorhandler": "^1.3.2",
"express": "^4.10.7",
"express-handlebars": "^1.1.0",
"method-override": "^2.3.1",
"moment": "^2.9.0",
"mongodb": "^1.4.28",
"mongoose": "^3.8.21",
"morgan": "^1.5.1"
}
}
服务器： server.js
'use strict';
var express = require('express'),
config = require('./server/configure'),
app = express();
app.set('port', process.env.PORT || 3300);
app.set('views', __dirname + '/views');
app = config(app);
var server = app.listen(app.get('port'), function() {
console.log('Server up: http://localhost:' + app.get('port'));
});
路线文件： routes.js
'use strict';
var home = require('../controllers/home'),
image = require('../controllers/image');
module.exports.initialize = function(app, router) {
router.get('/', home.index);
router.get('/images/:image_id', image.index);
router.post('/images', image.create);
router.post('/images/:image_id/like', image.like);
router.post('/images/image_id/comment', image.comment);
app.use('/', router);
};
查看包装器： main.handlebars
<!DOCTYPE HTML>
<html lang="eng">
<head>
<meta charset="UTF-8">
<title>Tuts Book</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="/public/css/styles.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div class="page-header">
<div class="container">
<div class="col-md-6">
<h1><a href="/">imgPloadr.io</a></h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
{{{body}}}
</div>
<div class="col-sm-4">
{{> stats this }}
{{> popular this }}
{{> comments this }}
</div>
</div>
</div>
<div style="border-top: solid 1px #eee; padding-top: 1em;">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<p class="text-muted">Schatz.com | © 2014</p>
<p class="text-center">
<i class="fa fa-twitter-square fa-2x text-primary"></i>
<i class="fa fa-facebook-square fa-2x text-primary"></i>
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/public/js/scripts.js" type="text/javascript" ></script>
</body>
</html>
索引视图： index.handlebars
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">{{ image.title }}</h2>
</div>
<div class="panel-body">
<p>{{ image.description }}</p>
<div class="col-md-12 text-center">
<img src="/public/upload/{{ image.filename }}" class="img-thumbnail">
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-8">
<button class="btn btn-success" id="btn-like" data-id="{{ image.uniqueId }}"><i
class="fa fa-heart"> Like</i></button>
<strong class="likes-count">{{ image.likes }}</strong> - <i
class="fa fa-eye"></i> <strong>{{ image.views }}</strong>
- Posted: <em class="text-muted">{{ timeago image.timestamp }}</em>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-8">
<strong class="panel-title">Comments</strong>
</div>
<div class="col-md-4 text-right">
<button class="btn btn-default btn-sm" id="btn-comment" data-id="{{ image
.uniqueId }}"><i class="fa fa-comments-o"> Post Comment...</i></button>
</div>
</div>
</div>
<div class="panel-body">
<blockquote id="post-comment">
<div class="row">
<form method="post" action="/images/{{ image.uniqueId }}/comment">
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label" for="name">Name:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="name">
</div>
</div>
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label" for="email">Email:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="email">
</div>
</div>
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label" for="comment">Comment:</label>
<div class="col-sm-10">
<textarea class="form-control" name="comment" rows="2"></textarea>
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-sm-12 text-right">
<button type="submit" id="comment-btn" class="btn btn-success"
type="button"><i class="fa fa-comment"></i> Post</button>
</div>
</div>
</form>
</div>
</blockquote>
<ul class="media-list">
{{#each comments}}
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://www.gravatar.com/avatar/{{
gravatar }}?d=monsterid&s=45">
</a>
<div class="media-body">
{{ comment }}
<br/><strong class="media-heading">{{ name }}</strong> <small
class="text-muted">{{ timeago timestamp }}</small>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
我花了几天时间研究了一系列不同的可能性（包括新的Express 4.0的东西），但是我已经没有线索了。
我还发现了这篇帖子：req.files question，但我的HTML已经有了这个解决方案。
如果你们有任何想法，我真的很感激你的帮助。如果我没有包含相关代码，请告诉我，我会添加它。再次感谢。
答案 0 :(得分：0)
Express 4无法处理多部分帖子，您需要使用Multer或Busboy。查找GridFS，因为您需要将pic保存到mongo数据库，链接到用户，并能够在以后检索它。
我个人只会在另一台服务器上进行图片上传，所以你只需要将你的node.js - mongodb设置处理为文本链接。看看这个，一步一步地解释：https://devcenter.heroku.com/articles/s3-upload-node