使用dropzone上傳照片時出現錯誤

您好我在jQuery中上傳圖片時遇到問題。當我上傳圖片時，向我顯示錯誤。我如何解決這個問題？使用dropzone上傳照片時出現錯誤

我不能使用表單來dropzone，因爲它是另一種形式。錯誤：

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" 
    } 
}

來源

2017-07-02 shabnam isfehani

我做了一個基於您的代碼的工作示例，我無法重現該錯誤。文件成功上傳。

唯一的區別是我已經將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" 
    } 
}

來源

2017-07-02 11:59:17

我無法理解這些錯誤的原因。我在另一個程序中使用此代碼，而不是錯誤。謝謝 –

當我刪除app.use（fileUpload（））; ，錯誤400不會發生。但這些文件不會被上傳。 –

你使用什麼版本的express和expres-fileupload？我用我的package.json編輯了我的答案。一切工作正常，我沒有錯誤 –

我解決這個問題與f下面的代碼。

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; 
    });

來源

2017-07-08 04:56:37

使用dropzone上傳照片時出現錯誤

回答

相關問題