使用dropzone上传照片时显示错误
您好我有上传图像在jQuery中的问题。 当我uplaod图像，显示我的错误。 我如何解决这个问题？
我不能使用表单来dropzone，因为它是另一种forms。 错误：
POST http：// localhost：3000 / upload 400（Bad Request）
Object {error：Object}
代码的HTML
<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/*" }); })
代码app.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!'); } }); });
的package.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块之前的行。
这是一个基于你的代码完整的工作源
server.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"); });
的index.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>
的package.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" } }
我用下面的代码解决了这个问题。
app.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:\n\n'); 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; });