Lo primero de todo que vamos a hacer es crear en nuestra directorio /routes el fichero upload.js dentro de él vamos a crear dos funciones.
La primera se va a encargar de cargar el formulario en el que vamos a insertar la imagen (fichero upload.jade que veremos mas adelante):
exports.upload = function(req, res){ res.render('upload',{ title: 'ejemplo de subida de imagen por HispaBigData' }); };La segunda es la función que va a recibir por post la imagen y la va a guardar en nuestro servidor, para ello debemos de importar el modulo fs:
// Importamos el modulo para subir ficheros var fs = require('fs'); exports.Uploads = function(req, res) { console.log(req.files); var tmp_path = req.files.photo.path; // Ruta donde colocaremos las imagenes var target_path = './public/images/' + req.files.photo.name; // Comprobamos que el fichero es de tipo imagen if (req.files.photo.type.indexOf('image')==-1){ res.send('El fichero que deseas subir no es una imagen'); } else { // Movemos el fichero temporal tmp_path al directorio que hemos elegido en target_path fs.rename(tmp_path, target_path, function(err) { if (err) throw err; // Eliminamos el fichero temporal fs.unlink(tmp_path, function() { if (err) throw err; res.render('upload',{message: '/images/' + req.files.photo.name,title: 'ejemplo de subida de imagen por HispaBigData'}); }); }); } };Como podeis observar en la función si la carga de la imagen ha sido correcta, vamos a enviar al upload.jade la variable message en la que indicamos cual es la ruta donde se encuentra guardada. Ahora en el fichero app.js vamos a añadir la ruta del archivo creado anteriormente, en la variable express
upload = require('./routes/upload.js')y vamos a hacer dos llamadas nuevas, una para el método GET y otra para el método POST.
// indicamos que del fichero upload.js haga mención a la función upload, para cargar el formulario html app.get('/upload',upload.upload); // indicamos que del fichero upload.js haga mención a la función Uploads para subir la imagen. app.post('/upload', upload.Uploads);Una vez tenemos preparado toda la parte de javascript, vamos a crear el formulario donde subiremos la imagen, pero primero, dentro de la carpata /views vamos a editar el index.jade y añadimos una opción más.
li a(href="/upload") Subida de imagenPor último creamos el fichero upload.jade en el que vamos a mostrar nuestra imagen que vamos a subir al servidor.
extends layout block content form.register(action='/upload', method='post', enctype='multipart/form-data') if locals.message img(src='#{message}', alt='') br |Selecciona la imagen input(type="file", name='photo') br input(type='submit', value='Guardar')Como podéis observar, comprobamos si la variable message esta inicializada para mostrar la imagen que acabamos de subir en el servidor, solo se mostrará cuando pulsemos el botón de guardar y se haya verificado que realmente es una imagen.
Aquí os dejamos el proyecto para que podáis descargarlo y probarlo ustedes mismo.
como podría subir la imagen con ajax y no a través del formulario?
ResponderEliminarEchale un vistazo aqui de como enviar datos con JQuery y Ajax a Node.js y adaptalo para subir la imagen al servidor.
Eliminarhttp://stackoverflow.com/questions/13478464/how-to-send-data-from-jquery-ajax-request-to-node-js-server?rq=1