拖放带有 Nodejs 和 Express 500 错误代码的上传器



我正在尝试将"简单文件上传器"(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>

路由/索引.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;

快速 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'
    })
}));

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

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

相关内容

最新更新