个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 00:29:23 24 4
gpt4 key购买 nike

客户端:

我已经使用 AngularJS 和 NodeJS 完成了文件上传，它可以正常工作，但是在上传文件时我需要将“名称”和“电子邮件”传递给服务器。

服务器端:

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

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 )我得到了我在表单中输入的值，但后端(nodejs)我得到了未定义的值 enter image description here enter image description here

最佳答案

您需要修改 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

关于javascript - 如何在将图像上传到服务器时传递多个值(使用 AngularJS 和 NodeJS 进行文件上传)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41568946/

24 4 0
文章推荐： python - 重命名多索引列名 Python
文章推荐： node.js - botframework 在网络聊天中提及对话 ID
文章推荐： python - 优化 Python 函数以在 Codewars 上提交
文章推荐： python - Pyqt:使用布局管理器在双小部件应用程序上强制执行 sizeHint() 尺寸
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com