Carga de nodos / archivos Express

Estoy usando el nodo v0.10.26 y expreso v4.2.0 y soy bastante nuevo en el nodo. He estado golpeando mi cabeza contra mi escritorio durante las últimas tres horas tratando de obtener un formulario de carga de archivos trabajando con el nodo. En este punto, solo estoy tratando de obtener archivos req para no regresar indefinidos. Mi vista se ve así

   {{ title }}    

{{ title }}

Welcome to {{ title }}

Aquí están mis rutas

 var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express' }); }); router.post('/upload', function(req, res){ console.log(req.files); }); module.exports = router; 

Y aquí está mi app.js

 var express = require('express'); var path = require('path'); var favicon = require('static-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'hjs'); app.use(favicon()); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users); /// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); /// error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; 

Vi en algún lugar que se methodOverride() que incluir methodOverride() y bodyParser({keepExtensions:true,uploadDir:path}) ayudaría, pero ni siquiera puedo iniciar mi servidor si agrego esas líneas.

Problema de ExpressJS:

La mayor parte del middleware se elimina de express 4. consulta: http://www.github.com/senchalabs/connect#middleware Para middleware multiparte como busboy, busboy-connect, formidable, flow, parted es necesario.

Este ejemplo funciona usando el middleware connect-busboy . crear / img y / carpetas públicas.
Usa la estructura de la carpeta:

\ server.js

\ img \ “donde se cargan cosas a”

\ public \ index.html

SERVER.JS

 var express = require('express'); //Express Web Server var busboy = require('connect-busboy'); //middleware for form/file upload var path = require('path'); //used for file path var fs = require('fs-extra'); //File System - for file manipulation var app = express(); app.use(busboy()); app.use(express.static(path.join(__dirname, 'public'))); /* ========================================================== Create a Route (/upload) to handle the Form submission (handle POST requests to /upload) Express v4 Route definition ============================================================ */ app.route('/upload') .post(function (req, res, next) { var fstream; req.pipe(req.busboy); req.busboy.on('file', function (fieldname, file, filename) { console.log("Uploading: " + filename); //Path where image will be uploaded fstream = fs.createWriteStream(__dirname + '/img/' + filename); file.pipe(fstream); fstream.on('close', function () { console.log("Upload Finished of " + filename); res.redirect('back'); //where to go next }); }); }); var server = app.listen(3030, function() { console.log('Listening on port %d', server.address().port); }); 

INDEX.HTML

     angular file upload   

Lo siguiente funcionará con formidable SERVER.JS

 var express = require('express'); //Express Web Server var bodyParser = require('body-parser'); //connects bodyParsing middleware var formidable = require('formidable'); var path = require('path'); //used for file path var fs =require('fs-extra'); //File System-needed for renaming file etc var app = express(); app.use(express.static(path.join(__dirname, 'public'))); /* ========================================================== bodyParser() required to allow Express to see the uploaded files ============================================================ */ app.use(bodyParser({defer: true})); app.route('/upload') .post(function (req, res, next) { var form = new formidable.IncomingForm(); //Formidable uploads to operating systems tmp dir by default form.uploadDir = "./img"; //set upload directory form.keepExtensions = true; //keep file extension form.parse(req, function(err, fields, files) { res.writeHead(200, {'content-type': 'text/plain'}); res.write('received upload:\n\n'); console.log("form.bytesReceived"); //TESTING console.log("file size: "+JSON.stringify(files.fileUploaded.size)); console.log("file path: "+JSON.stringify(files.fileUploaded.path)); console.log("file name: "+JSON.stringify(files.fileUploaded.name)); console.log("file type: "+JSON.stringify(files.fileUploaded.type)); console.log("astModifiedDate: "+JSON.stringify(files.fileUploaded.lastModifiedDate)); //Formidable changes the name of the uploaded file //Rename the file to its original name fs.rename(files.fileUploaded.path, './img/'+files.fileUploaded.name, function(err) { if (err) throw err; console.log('renamed complete'); }); res.end(); }); }); var server = app.listen(3030, function() { console.log('Listening on port %d', server.address().port); }); 

Aquí hay una versión simplificada ( la esencia ) de la respuesta de Mick Cullen, en parte para demostrar que no tiene que ser muy complejo implementar esto; en parte para dar una referencia rápida para cualquier persona que no esté interesada en leer páginas y páginas de código.


Tienes que hacer que tu aplicación use connect-busboy :

 var busboy = require("connect-busboy"); app.use(busboy()); 

Esto no hará nada hasta que lo desencadene. Dentro de la llamada que maneja la carga, haga lo siguiente:

 app.post("/upload", function(req, res) { if(req.busboy) { req.busboy.on("file", function(fieldName, fileStream, fileName, encoding, mimeType) { //Handle file stream here }); return req.pipe(req.busboy); } //Something went wrong -- busboy was not loaded }); 

Vamos a desglosar esto:

  • Verifica si se configuró req.busboy (el middleware se cargó correctamente)
  • Usted configura un oyente de "file" en req.busboy
  • Usted canaliza el contenido de la req.busboy para req.busboy

Dentro del oyente de archivos hay un par de cosas interesantes, pero lo que realmente importa es el fileStream : es fileStream , que luego se puede escribir en un archivo, como lo haría normalmente.

Peligro: debe manejar esta legibilidad, o express nunca responderá a la solicitud , consulte la API busboy (sección de archivo ).

Otra opción es usar Multer , que usa busboy debajo del capó, pero es más fácil de configurar.

 var multer = require('multer'); 

Use multer y configure el destino para la carga:

 app.use(multer({dest:'./uploads/'})); 

Cree un formulario en su vista, enctype='multipart/form-data es necesario para que multer funcione:

 form(role="form", action="/", method="post", enctype="multipart/form-data") div(class="form-group") label Upload File input(type="file", name="myfile", id="myfile") 

Luego, en su POST, puede acceder a los datos sobre el archivo:

 app.post('/', function(req, res) { console.dir(req.files); }); 

Un tutorial completo sobre esto se puede encontrar aquí .

Necesitaba ser examinado con un poco más de detalle que las otras respuestas proporcionadas (por ejemplo, ¿cómo escribo el archivo en una ubicación que decido en tiempo de ejecución?). Espero que esto sea de ayuda para otros:

obtener connect-busboy:

 npm install connect-busboy --save 

En su server.js, agregue estas líneas

 let busboy = require('connect-busboy') // ... app.use(busboy()); // ... app.post('/upload', function(req, res) { req.pipe(req.busboy); req.busboy.on('file', function(fieldname, file, filename) { var fstream = fs.createWriteStream('./images/' + filename); file.pipe(fstream); fstream.on('close', function () { res.send('upload succeeded!'); }); }); }); 

Sin embargo, esto parece omitir el manejo de errores … lo editaré si lo encuentro.

Encuentro esto, simple y eficiente:

 app.post('/upload', function(req, res) { if (!req.files) return res.status(400).send('No files were uploaded.'); // The name of the input field (ie "sampleFile") is used to retrieve the uploaded file let sampleFile = req.files.sampleFile; // Use the mv() method to place the file somewhere on your server sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) { if (err) return res.status(500).send(err); res.send('File uploaded!'); }); 

carga de archivos express

Multer es un middleware node.js para manejar multipart / form-data, que se usa principalmente para cargar archivos. Está escrito encima del busboy para una máxima eficiencia.

 npm install --save multer in app.js var multer = require('multer'); var storage = multer.diskStorage({ destination: function (req, file, callback) { callback(null, './public/uploads'); }, filename: function (req, file, callback) { console.log(file); callback(null, Date.now()+'-'+file.originalname) } }); var upload = multer({storage: storage}).single('photo'); router.route("/storedata").post(function(req, res, next){ upload(req, res, function(err) { if(err) { console.log('Error Occured'); return; } var userDetail = new mongoOp.User({ 'name':req.body.name, 'email':req.body.email, 'mobile':req.body.mobile, 'address':req.body.address }); console.log(req.file); res.end('Your File Uploaded'); console.log('Photo Uploaded'); userDetail.save(function(err,result){ if (err) { return console.log(err) } console.log('saved to database') }) }) res.redirect('/') });