我正在尝试将“简单文件上传器”(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'
})
}));
答案 0 :(得分:0)
将JSON.parse(request.body)
更改为仅request.body
应该有效。
由于调用app.use(bodyParser.json({limit:'10000mb'}))
,当请求到达路由时,req.body
已经包含已解析的JSON。