Question

客户方：

我已经使用AngularJS和NodeJS完成了文件上传工作但是在上传文件时我需要通过＆＃39; name＆＃39;和＆＃39;电子邮件＆＃39;到服务器。

服务器端：

将文件上传到文件夹后，我需要将文件路径，名称和电子邮件保存到数据库中。我怎么能这样做？

＆＃13;

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
        });
    };
}]);

＆＃13;

<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>

＆＃13;

后端代码：

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});
        });
    });

在前端（角度）我得到的价值我在表格中输入但后端（nodejs）我得到未定义的值

Answer 1

您需要修改角度代码，以便在请求数据中发送额外信息

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

Answer 2

您可以添加一个包含file的文件属性，并更新data property to contain email and name对象中的Upload.upload。通过这种方式，您可以在服务器端轻松获取它们。

注意：我已更新了我的答案，我将所有值Angular view包含在params对象中。我还改变了angular-ng-upload CDN并没有在codepen上工作。您还应该先加载Angular.js。

查看

Answer 3

我不确定我的回答是否会对您有所帮助。但您可以在数据中添加姓名和电子邮件。

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
        }

然后在服务器端，您可以创建一个功能或完成您的实际＆＃34; /上传＆＃34;使用查询保存在您的bdd中您想要的内容。您只需获取所创建路径的名称，然后在上传成功的情况下进行保存。

也许这会帮助你更多：https://www.npmjs.com/package/ng-file-upload

如何在将图像上传到服务器时传递多个值（使用AngularJS和NodeJS进行文件上传）？

3 个答案: