¿Cómo pasar varios valores mientras se carga la imagen en el servidor (Carga de archivos con AngularJS y NodeJS)?

Lado del cliente:

He realizado la carga de archivos con AngularJS y NodeJS está funcionando, pero al subir el archivo necesito pasar ‘nombre’ y ‘correo electrónico’ al servidor.

Lado del servidor:

Después de cargar el archivo en la carpeta, necesito guardar la ruta del archivo, el nombre y el correo electrónico en la base de datos. ¿Cómo puedo hacer esto?

angular.module('fileUpload', ['ngFileUpload']) .controller('MyCtrl',['Upload','$window',function(Upload,$window){ var vm = this; vm.submit = function(){ //function to call on form submit if (vm.upload_form.file.$valid && vm.file) { //check if from is valid vm.upload(vm.file); //call upload function } } vm.upload = function (file) { console.log(vm.name); console.log(vm.email); Upload.upload({ url: 'http://localhost:3000/upload', //webAPI exposed to upload the file data:{file:file} //pass file as data, should be user ng-model }).then(function (resp) { //upload function returns a promise if(resp.data.error_code === 0){ //validate success $window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: '); } else { $window.alert('an error occured'); } }, function (resp) { //catch error console.log('Error status: ' + resp.status); $window.alert('Error status: ' + resp.status); }, function (evt) { console.log(evt); var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress }); }; }]); 
      Home   

Angular Node File Upload

name

email
Image Image thumbnail: *required
File too large {{up.file.size / 1000000|number:1}}MB: max 20M <!-- Multiple files
Select
Drop files:
Drop
-->

{{up.progress}}

Código de fondo:

 var express = require('express'); var app = express(); var bodyParser = require('body-parser'); var multer = require('multer'); app.use(function(req, res, next) { //allow cross origin requests res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET"); res.header("Access-Control-Allow-Origin", "http://localhost"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); /** Serving from the same express Server No cors required */ app.use(express.static('../client')); app.use(bodyParser.json()); var storage = multer.diskStorage({ //multers disk storage settings destination: function (req, file, cb) { cb(null, './uploads/'); }, filename: function (req, file, cb) { var datetimestamp = Date.now(); cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]); } }); var upload = multer({ //multer settings storage: storage }).single('file'); /** API path that will upload the files */ app.post('/upload', function(req, res) { console.log(req.body); upload(req,res,function(err){ if(err){ res.json({error_code:1,err_desc:err}); return; } res.json({error_code:0,err_desc:null}); }); }); app.listen('3000', function(){ console.log('running on 3000...'); }); 

lo intenté así

 Upload.upload({ url: 'http://localhost:3000/upload', //webAPI exposed to upload the file data:{file:file, name:vm.name, email:vm.email} //pass file as data, should be user ng-model }) 

backend

 app.post('/upload', function(req, res) { console.log(req.body); console.log(req.file); upload(req,res,function(err){ if(err){ res.json({error_code:1,err_desc:err}); return; } res.json({error_code:0,err_desc:null}); }); }); 

en la parte delantera (angular) estoy obteniendo un valor lo que ingresé en la forma pero el backend (nodejs) estoy obteniendo un valor indefinido introduzca la descripción de la imagen aquí introduzca la descripción de la imagen aquí

Debe modificar su código angular para enviar la información adicional en los datos de la solicitud

 Upload.upload({ url: 'http://localhost:3000/upload', //webAPI exposed to upload the file data:{file:file, name:vm.name, email:vm.email} //pass file as data, should be user ng-model }) 

Luego, en el código de fondo, puede hacer referencia a esto en el cuerpo de la solicitud.

 req.body.name req.body.email 

No estoy seguro si mi respuesta te ayudará. Pero puede agregar en sus datos el nombre y el correo electrónico.

 Upload.upload({ url: 'http://localhost:3000/upload', //webAPI exposed to upload the file data:{file:file,name:"putHeretheName",email:"putHereTheMail"} //pass file as data, should be user ng-model } 

Luego, del lado del servidor, puede crear una función o completar su “/ upload” real con una consulta que guarde en su bdd lo que desee. Solo tienes que obtener el nombre de la ruta creada y luego guardar si la carga se realiza correctamente.

Quizás esto, por ejemplo, te ayude más: https://www.npmjs.com/package/ng-file-upload

Puede agregar una propiedad de archivo que mantendrá el file y actualizará la data property to contain email and name dentro del objeto Upload.upload . De esta manera puede obtenerlos fácilmente en el lado del servidor.

Nota : Actualicé mi respuesta, envolví todos los valores que emite la Angular view dentro de un objeto params . También cambié angular-ng-upload CDN no estaba funcionando en el codepen. También debe cargar Angular.js primero.

ver

      Home   

Angular Node File Upload

name

email
Image Image thumbnail: *required
File too large {{up.params.file.size / 1000000|number:1}}MB: max 20M

{{up.progress}}

{{up.params}}{{up.params.file.size}}

Angular

 var vm = this; vm.submit = function(){ if (vm.upload_form.file.$valid && vm.params.file) { console.log(vm.params) vm.upload(vm.params); // Pass the `vm.params` object. } } vm.upload = function (params) { console.log(params.name); // params.name should be available console.log(params.email); // params.email should be available console.log(params.file); // params.file should be available Upload.upload({ url: 'http://localhost:3000/upload', file: params.file, // Image to upload data: { name: params.name, email: params.email } }) } 

Node.js / express

 app.post('/upload', function(req, res) { console.log(JSON.parse(req.body.data)); // email and name here console.log(req.files.file); // file object upload(req,res,function(err){ if(err){ res.json({error_code:1,err_desc:err}); return; } res.json({error_code:0,err_desc:null}); }); });