javascript - MongoDB/Express/Node 文件上传错误

标签 javascript html node.js forms express

我正在通过一个 Mongo/Node/Express 示例来帮助我理解一个全栈项目的各个部分是如何组合在一起的。该应用程序非常简单:一个快速服务器发送一个页面,用户可以使用该页面上传图片。图片已保存,用户可以使用该网站浏览上传的图片并查看各种统计数据。

我还没有开始实现任何与持久性或 Mongo 相关的东西,所以我很确定这不是问题(这意味着它可能是)。我正在使用这些框架/包:

Node.js:0.10.33

  • express :4.10.7
  • Express-Handlebars:1.1.0
  • MongoDB:1.4.28
  • Mongoose :3.8.21

凉亭:1.3.12

  • Bootstrap :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);
};

View 包装器: 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>

索引 View : 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 中已经有了该解决方案。

如果你们有任何想法,我将非常感谢您的帮助。如果有我没有包含的相关代码,请告诉我,我会添加它。再次感谢。

最佳答案

Express 4 无法处理多部分帖子,您需要使用 Multer 或 Busboy。查找 GridFS,因为您需要将图片保存到 mongo 数据库,链接到用户,并能够在以后检索它。

我个人只想使用另一台服务器来上传图片,因此您只需使用 node.js - mongodb 设置将链接作为文本处理。看看这个,它一步一步解释:https://devcenter.heroku.com/articles/s3-upload-node

关于javascript - MongoDB/Express/Node 文件上传错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27913766/

相关文章:

javascript - jQuery() 与 jQuery.parseHtml() 空格语法错误

javascript - d3 元素内的 html 标签

javascript - 如何轻松制作 ionic 标签导航

javascript - 如何在我的页面中为左侧菜单添加不同的滚动条

javascript - '类型错误 : undefined is not a function' when jumping 'tween modules

javascript - Uncaught TypeError : ctorParameters. 映射在更新到 Angular 7 后不是一个函数

javascript - 为什么我的条形图是倒置的?

css - 如何在 CSS 中制作此布局?

javascript - 不考虑 puppeteer 输入字段

javascript - 保存复选框