node.js - Uploading pictures -
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. hope req.file existed, wasn't. found directory('public/uploads'),b ut doesn't have pictures. ajax code had run alert('success'), guess multer did't save image or didn't images. saw network request has send image. can tell me what's wrong it?
your api server example not working, assume part of working server. 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 here
var file = $('#upfile'); var formdata = new formdata(); formdata.append('file',file[0]); i have achieved sending file in request using var formdata = new formdata($('form')[0]);
here 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>
Comments
Post a Comment