HTML code:
<form enctype="multipart/form-data">
<input id="upFile" class="upFile" type="file"
size="0" name="file" accept="image/gif,image/jpeg,image/png">
<input type="submit" id="upFileBtn" class="upFile">
</form>
Ajax code: result:success
$('#upFileBtn').click(function () {
var file = $('#upFile');
var formData = new FormData();
formData.append('file',file[0]);
$.ajax({
url: '/api/upload',
type: 'post',
data: formData,
// async: false,
cache: false,
contentType: false,
processData: false,
success: function(data){
if(200 === data.code) {
$('#upFile').val('');
alert('success');
} else {
alert("failed");
}
},
error: function(){
alert("wrong");
}
});
});
API:
var express = require('express');
var router = express.Ro
router();var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, config.upload)// upload:"./public/uploads"
},
filename: function (req, file, cb) {
cb(null,file.originalname)
}
});
var upload = multer({ storage: storage });
//upload
router.post('/upload', upload.single('file'), function (req, res, next) {
console.log(req.file);//undefined
});
I can't find out what's wrong. I hope that req.file existed, but it wasn't. I found the directory('public/uploads'),b ut it doesn't have any pictures. The Ajax code had run alert('success'), I guess that multer did't save image or didn't get the images. But I saw the network request has send the image. So who can tell me what's wrong with it?
Your API server example is not working, I assume that it is just a part of a working server. I will post minimal API server example
var express = require('express');
var app = express();
var multer = require('multer');
var path = require('path');
app.use('/', express.static(__dirname));
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, './files');// upload:"./public/uploads"
},
filename: function(req, file, cb) {
cb(null, file.originalname)
}
});
var upload = multer({storage: storage});
//upload
app.post('/api/upload', upload.single('file'), function(req, res, next) {
console.log(req.file);//undefined
res.send({code: 200});
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
});
The main problem is here
var file = $('#upFile');
var formData = new FormData();
formData.append('file',file[0]);
I have achieved sending a file in a request by using var formData = new FormData($('form')[0]);
Here is a working example
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</head>
<body>
<form enctype="multipart/form-data">
<input id="upFile" class="upFile" type="file"
size="0" name="file" accept="image/gif,image/jpeg,image/png">
<input type="submit" id="upFileBtn" class="upFile">
</form>
<script>
$('#upFileBtn').click(function() {
var formData = new FormData($('form')[0]);
$.ajax({
url: '/api/upload',
type: 'post',
data: formData,
// async: false,
cache: false,
contentType: false,
processData: false,
success: function(data) {
if (200 === data.code) {
$('#upFile').val('');
alert('success');
} else {
alert("failed");
}
},
error: function() {
alert("wrong");
}
});
});
</script>
</body>
</html>