嗨，我在jquery中上传图像时遇到问题。当我更新图像时，向我显示错误。我该如何解决这个？
我不能使用该表单来放置区域，因为它是另一种形式。 错误：
开机自检 http://localhost:3000/upload 400(错误请求(
对象 {错误： 对象}
代码网页
<div class="dropzone" action="/upload" encType="multipart/form-data" method='post' id="id_dropzone" >
<div class="dz-message">
ِDrop file here to upload
</div>
</div>
代码 JQUERY
$(document).ready(function(){
Dropzone.autoDiscover = false;
$("#id_dropzone").dropzone({addRemoveLinks: true, autoQueue: true,paramName: "file", maxFilesize: 2, maxFiles: 1,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
console.log(response);
},
maxThumbnailFilesize: 1,acceptedFiles: "image/*" });
})
代码应用.js
var express = require('express');
var routes = require('./routes')();
var fileUpload = require('express-fileupload');
var path = require('path');
var app = express();
app.use(fileUpload());
app.use('/files', express.static(__dirname + '/files'));
.
.
.
app.post('/upload', function(req, res) {
var sampleFile;
if (!req.files) {
res.send('No files were uploaded.');
return;
}
sampleFile = req.files;
console.log(sampleFile);
sampleFile.file.mv(__dirname + '/files/'+sampleFile.file.name,
function(err) {
if (err) {
console.log(err);
res.status(500).send(err);
} else {
res.send('File uploaded!');
}
});
});
包.json
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"connect-mongo": "~0.3.3",
"ejs": "^2.5.6",
"express": "^3.21.2",
"express-fileupload": "^0.1.4",
"mongoose": "~3.6.19"
},
"devDependencies": {
"mocha": "~1.12.1",
"should": "~1.2.2",
"supertest": "~0.7.1"
}
}
我已经根据您的代码制作了一个工作示例，但我无法重现该错误。文件上传成功。
唯一的区别是我在块之前移动了Dropzone.autoDiscover = false;行document.ready。
这是一个基于您的代码的完整工作源代码
服务器.js
var express = require('express');
var fileUpload = require('express-fileupload');
var path = require('path');
var app = express();
app.use(fileUpload());
app.use('/files', express.static(__dirname + '/files'));
app.use('/', express.static(__dirname + '/'));
app.post('/upload', function(req, res) {
var sampleFile;
if (!req.files) {
res.send('No files were uploaded.');
return;
}
sampleFile = req.files;
console.log(sampleFile);
sampleFile.file.mv(__dirname + '/files/' + sampleFile.file.name,
function(err) {
if (err) {
console.log(err);
res.status(500).send(err);
} else {
res.send('File uploaded!');
}
});
});
//init server
app.listen(3000, function() {
console.log("Server running on port 3000");
});
索引.html
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/dropzone.js"></script>
</head>
<body>
<div class="dropzone" action="/upload" encType="multipart/form-data" method='post' id="id_dropzone">
<div class="dz-message">
ِDrop file here to upload
</div>
</div>
</body>
</html>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function() {
$("#id_dropzone").dropzone({
addRemoveLinks: true, autoQueue: true, paramName: "file", maxFilesize: 2, maxFiles: 1,
success: function(file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function(file, response) {
file.previewElement.classList.add("dz-error");
console.log(response);
},
maxThumbnailFilesize: 1, acceptedFiles: "image/*"
});
})
</script>
包.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.15.3",
"express-fileupload": "^0.1.4"
}
}
我用以下代码解决了这个问题。
应用.js
var multiparty = require('multiparty');
const fs = require('fs');
var util = require('util');
.
.
.
app.post('/file-upload', function(req,res){
var form = new multiparty.Form({autoFiles:true });
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:nn');
var oldpath = req.files.file.path;
var newpath = __dirname + '\files\' + req.files.file.name;
var readStream = fs.createReadStream(oldpath);
var writeStream = fs.createWriteStream(newpath);
readStream.pipe(writeStream);
res.end();
});
return;
});