使用Nodejs和Express 500错误代码拖放上载

时间:2014-11-25 19:32:36

标签: javascript node.js express drag-and-drop

我正在尝试将“简单文件上传器”(https://github.com/merty/simple-file-uploader)的示例添加到Node.js和Express.js项目中,但我从Express获得了500内部服务器错误。我试过这个网站的多篇文章,但到目前为止没有。

这是我的文件

index.ejs

<!DOCTYPE html>
<html>
    <head>
        <title>File Uploader</title>
        <style type="text/css">
body {
    background-color: #f7f7f7;
    margin: 50px auto 0 auto;
    width: 800px;
}

#dropzoneWrap {
    background-color: #fff;
    border: 5px solid #f1f1f1;
    padding-bottom: 20px;
    padding-top: 20px;
}

#dropzone {
    background-color: #f7f7f7;
    border: 5px dashed #e7e7e7;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 2em;
    height: 500px;
    margin: auto;
    overflow: scroll;
    overflow-x: hidden;
    text-align: center;
    width: 750px;
}

#dropzoneLabel {
    position: relative;
    top: 45%;
}

#dropzone .file {
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(245, 245, 245)), to(rgb(229, 229, 229)));
    background-image: -webkit-linear-gradient(top, rgb(245, 245, 245), rgb(229, 229, 229));
    background-image: -moz-linear-gradient(top, rgb(245, 245, 245), rgb(229, 229, 229));
    background-image: -o-linear-gradient(top, rgb(245, 245, 245), rgb(229, 229, 229));
    background-image: -ms-linear-gradient(top, rgb(245, 245, 245), rgb(229, 229, 229));
    background-image: linear-gradient(top, rgb(245, 245, 245), rgb(229, 229, 229));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f5f5f5', EndColorStr='#e5e5e5');
    color: #909090;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    padding: 20px;
    text-align: left;
    width: 710px;
}

#dropzone .file .name {
    float: left;
    width: 90%;
}

#dropzone .file .progress {
    float: right;
    width: 10%;
}</style>
    </head>
    <body>
        <div id="dropzoneWrap">
            <div id="dropzone">
                <span id="dropzoneLabel">Drop the files here...</span>
            </div>
        </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/vendor/jquery/dist/jquery.min.js"></script>


    <script>
    ;(function($, window) {

    "use strict";

    var document = window.document;

    $(document).ready(function() {

        var all_files = [],
            current_file_id = 0,
            locked = false,
            prev_count_files = 0,
            waiting = 0,
            drop, dropzone, handleNextFile, handleReaderLoad, noopHandler;

        noopHandler = function(evt) {
            evt.stopPropagation();
            evt.preventDefault();
        };

        drop = function(evt) {

            noopHandler(evt);

            var files = evt.dataTransfer.files,
                count = files.length,
                i, j;

            if ( count > 0 ) {

                prev_count_files = all_files.length;

                if ( $("#dropzoneLabel").length !== 0 ) {
                    $("#dropzone").html('');
                }

                for ( i = prev_count_files + waiting, j = 0; i < prev_count_files + files.length + waiting; i++, j++ ) {
                    $("#dropzone").append('<div class="file ' + i + '"><div class="name">' + files[j].name + '</div><div class="progress">Waiting...</div></div>');
                }

                waiting += count;

                if ( ! locked ) {
                    waiting -= count;
                    all_files.push.apply(all_files, files);
                    handleNextFile();
                }
            }
        };

        handleReaderLoad = function(evt) {

            var current_file = {};

            current_file.name = all_files[current_file_id].name;
            current_file.type = all_files[current_file_id].type;
            current_file.contents = evt.target.result;

            $.post('/upload', JSON.stringify(current_file), function(data, textStatus, jqXHR) {

                if ( jqXHR.status === 200 ) {
                    $(".file." + current_file_id + " .progress").html("Uploaded");
                } else {
                    $(".file." + current_file_id + " .progress").html("Failed");
                }

                all_files[current_file_id] = 1;
                current_file_id++;
                handleNextFile();
            });
        };

        handleNextFile = function() {

            if ( current_file_id < all_files.length ) {

                locked = true;

                $(".file." + current_file_id + " .progress").html("Uploading...");

                var current_file = all_files[current_file_id],
                    reader = new FileReader();

                reader.onload = handleReaderLoad;
                reader.readAsDataURL(current_file);

            } else {
                locked = false;
            }
        };

        dropzone = document.getElementById("dropzone");
        dropzone.addEventListener("dragenter", noopHandler, false);
        dropzone.addEventListener("dragexit", noopHandler, false);
        dropzone.addEventListener("dragover", noopHandler, false);
        dropzone.addEventListener("drop", drop, false);
    });

}(jQuery, window));

    </script>
</body>
</html>

路由/ index.js

 var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
var express = require('express');
var fs= require('fs');

router.post('/upload',multipartMiddleware,function (request, response) {
        console.log(JSON.parse(request.body));
        console.log(JSON.parse(request.file));
        console.log("\n ======> postData");

    });


    module.exports = router;

Express js配置

app.set('views', path.join(config.rootPath, 'views'));
app.set('view engine', 'ejs');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json({limit:'10000mb'}));
app.use(bodyParser.urlencoded({limit:'10000mb'}));
app.use(cookieParser());
app.use(express.static(path.join(config.rootPath, 'public')));

// Setting ExpressSessions to store in MongoDB 
app.use(expressSession({
    secret: 'keyboard sdfgsdf',
    cookie: {maxAge: 60*60*1000},
    resave: true,
    saveUninitialized:true,
    store: new mongoStore({
        db: mongoose.connection.db,
        collection:'sessions'
    })
}));

1 个答案:

答案 0 :(得分:0)

JSON.parse(request.body)更改为仅request.body应该有效。

由于调用app.use(bodyParser.json({limit:'10000mb'})),当请求到达路由时,req.body已经包含已解析的JSON。