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 | &copy; 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> &nbsp; - &nbsp; <i
                    class="fa fa-eye"></i> <strong> image.views </strong>
                &nbsp; - &nbsp; 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 文件上传错误的主要内容,如果未能解决你的问题,请参考以下文章

springboot多文件上传

文件上传漏洞原理是啥?

什么是文件上传漏洞

vue上传文件到后台

JSP-超大文件上传-如何上传文件-大文件上传

php文件上传漏洞代码只允许上传图片