如何在将图像上传到服务器时传递多个值（使用 AngularJS 和 NodeJS 上传文件）？
[英]How to pass multiple values while uploading image to server(File Upload with AngularJS and NodeJS)?
问题描述
Client side:
客户端：
I have done file upload with AngularJS and NodeJS it's working but while uploading file i need to pass 'name' and 'email' to server.我已经使用 AngularJS 和 NodeJS 完成了文件上传，它正在工作，但是在上传文件时我需要将“名称”和“电子邮件”传递给服务器。
Server side:服务器端：
After uploading file into folder i need to save file path, name and email into database.将文件上传到文件夹后，我需要将文件路径、名称和电子邮件保存到数据库中。 How can i do this?我怎样才能做到这一点？
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>
Backend code:后台代码：
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...');
});
i tried like this我试过这样
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});
});
});
in front end(angular)i am getting value what ever i entered in form but backend(nodejs) i am getting undefined value在前端（angular）我得到了我在表单中输入的值但后端（nodejs）我得到了未定义的值
3 个解决方案
解决方案1
1 2017-01-10 12:55:31
You need to amend your angular code to send the extra info in the data of the request您需要修改您的角度代码以发送请求数据中的额外信息
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
})
Then in your backend code you can reference this on the body of the request然后在您的后端代码中，您可以在请求正文中引用它
req.body.name
req.body.email
解决方案2
0 2017-01-10 12:59:54
You can add a file property that will hold the file and update the data property to contain email and name inside the Upload.upload object.您可以添加一个文件属性来保存file并更新data property to contain email and name在Upload.upload对象中data property to contain email and name 。 This way you can get them easily at the server side.这样您就可以在服务器端轻松获取它们。
Note : I have updated my answer, I wrapped all the values Angular view is emitting inside a params object.注意：我已经更新了我的答案，我将Angular view发出的所有值都包装在一个params对象中。 I also changed angular-ng-upload CDN wasn't working on codepen.我还更改了 angular-ng-upload CDN 不适用于 codepen。 You should also load Angular.js first.您还应该首先加载Angular.js 。
view看法
<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/express 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});
});
});
解决方案3
0 2017-01-10 13:11:31
I not sure if my answer will help you.我不确定我的回答是否对你有帮助。 But you can add in your data the name and the 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
}
Then server side you can create a function or complete your actual "/upload" with a query that save in your bdd what you want.然后服务器端您可以创建一个函数或完成您的实际“/上传”查询，将您想要的内容保存在您的 bdd 中。 You just have to get the name of the path created and then do the save in case of your upload is successful.您只需要获取创建的路径的名称，然后在上传成功的情况下进行保存。
Maybe this eg will help you more: https://www.npmjs.com/package/ng-file-upload也许这个例子会帮助你更多： https : //www.npmjs.com/package/ng-file-upload
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.