MongoDB/Express/Node 文件上传错误
Posted
技术标签:
【中文标题】MongoDB/Express/Node 文件上传错误【英文标题】:MongoDB/Express/Node File Upload Error 【发布时间】:2015-03-10 21:56:54 【问题描述】:我正在研究一个 Mongo/Node/Express 示例,以帮助我了解全栈项目的各个部分如何组合在一起。该应用程序非常简单:快速服务器发送一个页面,用户可以使用该页面上传图片。图片已保存,用户可以使用该网站查看上传的图片并查看各种统计信息。
我还没有开始实现任何与持久性或 Mongo 相关的东西,所以我很确定这不是问题(这意味着它可能是)。我正在使用这些框架/包:
Node.js:0.10.33
快递:4.10.7 Express-Handlebars:1.1.0 MongoDB:1.4.28 猫鼬:3.8.21鲍尔:1.3.12
引导程序:3.3.1当我尝试在网站上上传图像文件时,出现了我无法弄清楚的错误。当我选择一个图像文件并点击“提交”时,我在浏览器中收到以下错误...
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 中已经有了这个解决方案。
如果你们有任何想法,我将非常感谢您的帮助。如果有我没有包含的相关代码,请告诉我,我会添加它。再次感谢。
【问题讨论】:
我可以看看你们的图像控制器吗?您可以与 github 分享您的项目,或者通过电子邮件发送给我吗? marcelo.franco.alves@gmail.com 。如果您发送到我的电子邮件,请不要发送节点模块。 我正在等待.. 如果我看到所有代码,我可以帮助你。 我想你可能需要一个像 multer 这样的模块,拥有完整的代码肯定会。 嗨@Dan.. 很抱歉让您久等了.. 我现在就去看你的代码。 我相信@RahatMahbub 是正确的——看起来您还没有设置服务器来处理多部分帖子,而对于 Express 4,您需要 multer 来完成。 【参考方案1】:Express 4 无法处理多部分帖子,您需要使用 Multer 或 Busboy。查找 GridFS,因为您需要将图片保存到 mongo 数据库,链接到用户,以便以后检索。
我个人只需要另一台用于上传图片的服务器,因此您只需使用 node.js - mongodb 设置将链接作为文本处理。看看这个,一步一步解释:https://devcenter.heroku.com/articles/s3-upload-node
【讨论】:
以上是关于MongoDB/Express/Node 文件上传错误的主要内容,如果未能解决你的问题,请参考以下文章