如何在将图像上传到服务器时传递多个值（使用AngularJS和NodeJS进行file upload）？
客户端：
我做了file upload与AngularJS和NodeJS它的工作，但上传文件时，我需要传递“名称”和“电子邮件”服务器。
服务器端：
上传文件到文件夹后，我需要将文件path，名称和电子邮件保存到数据库中。 我怎样才能做到这一点？
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 }); }; }]); <script src="http://cdn.bootcss.com/danialfarid-angular-file-upload/12.2.13/ng-file-upload-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-file-upload/2.4.1/angular-file-upload.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <html> <head> <title>Home</title> </head> <body ng-app="fileUpload"> <h1>Angular Node File Upload</h1> <form ng-controller="MyCtrl as up" name="up.upload_form"> name <input type="text" ng-model="up.name"><br> <br> email <input type="text" ng-model="up.email"><br> Image <input type="file" ngf-select ng-model="up.file" name="file" ngf-max-size="20MB" /> Image thumbnail: <img style="width:100px;" ng-show="!!up.file" ngf-thumbnail="up.file || '/thumb.jpg'"/> <i ng-show="up.upload_form.file.$error.required">*required</i><br> <i ng-show="up.upload_form.file.$error.maxSize">File too large {{up.file.size / 1000000|number:1}}MB: max 20M</i> <!-- Multiple files <div class="button" ngf-select ng-model="up.files" ngf-multiple="true">Select</div> Drop files: <div ngf-drop ng-model="up.files" class="drop-box">Drop</div> --><br> <button type="submit" ng-click="up.submit()">submit</button> <p>{{up.progress}}</p> </form> </body> </html>
后端代码：
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...'); });
我试过这样
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 })
后端
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}); }); });
在前端（angular）我越来越价值什么我曾经在窗体中input但后端（nodejs）我得到未定义的值 
您需要修改您的angular码以发送请求数据中的额外信息
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 })
然后在你的后端代码中，你可以在请求的主体上引用它
req.body.name req.body.email
我不知道如果我的答案会帮助你。 但是您可以在数据中添加名称和电子邮件。
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 }
然后在服务器端你可以创build一个函数，或者用一个查询保存你的bdd中的内容来完成你实际的“/ upload”。 您只需获取创build的path的名称，然后在上传成功的情况下进行保存。
也许这个例子会帮助你更多： https : //www.npmjs.com/package/ng-file-upload
您可以添加一个文件属性来保存file并更新data property to contain email and name在Upload.upload对象内data property to contain email and name 。 这样你可以很容易地在服务器端获得它们。
注意 ：我已经更新了我的答案，我包装了所有的值Angular view发射内params对象。 我也改变了angular-ng-upload CDN不能在codepen上工作。 你也应该先加载Angular.js 。
视图
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script> <script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script> <html> <head> <title>Home</title> </head> <body ng-app="fileUpload"> <h1>Angular Node File Upload</h1> <form ng-controller="MyCtrl as up" name="up.upload_form"> name <input type="text" ng-model="up.params.name"><br> <br> email <input type="text" ng-model="up.params.email"><br> Image <input type="file" ngf-select ng-model="up.params.file" name="file" ngf-max-size="20MB" /> Image thumbnail: <img style="width:100px;" ng-show="!!up.params.file" ngf-thumbnail="up.params.file || '/thumb.jpg'"/> <i ng-show="up.upload_form.params.file.$error.required">*required</i><br> <i ng-show="up.upload_form.params.file.$error.maxSize">File too large {{up.params.file.size / 1000000|number:1}}MB: max 20M</i> <!-- Multiple files <div class="button" ngf-select ng-model="up.files" ngf-multiple="true">Select</div> Drop files: <div ngf-drop ng-model="up.files" class="drop-box">Drop</div> --><br> <button type="submit" ng-click="up.submit()">submit</button> <p>{{up.progress}}</p> <p>{{up.params}}{{up.params.file.size}}</p> </form> </body> </html>
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的/快递
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}); }); });