1
我正在使用MEAN创建一个简单的注册表单。表格的所有文本值是否正确提交，但在形式负载在浏览器控制台（controller.js）时显示以下错误使用multipartFile上传图片的注册表
Error: [$injector:unpr] http://errors.angularjs.org/1.5.5/$injector/unpr?p0=multipartFormProvider%20%3C-%20multipartForm%20%3C-%20AppCtrl
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:84
at Object.d [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:344)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:146
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:344)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:78)
at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:163)
at R.instance (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:89:203)
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:64:374)(anonymous function) @ angular.js:13550这是我控制器/ controller.js
var myRegi =angular.module('myRegi',[]);
myRegi.controller('AppCtrl',['$scope','multipartForm', function($scope,$http,multipartForm) {
$scope.customer = {};
$scope.insert = function() {
console.log($scope.user);
console.log($scope.myFile);
// $http.post('/regi',$scope.user,$scope.myFile);
var uploadUrl = '/regi';
multipartForm.post(uploadUrl, $scope.customer);
}
myRegi.directive('fileModel', ['$parse', function($parse){
\t return {
\t \t restrict: 'A',
\t \t link: function(scope, element, attrs){
\t \t \t var model = $parse(attrs.fileModel);
\t \t \t var modelSetter = model.assign;
\t \t \t element.bind('change', function(){
\t \t \t \t scope.$apply(function(){
\t \t \t \t \t modelSetter(scope, element[0].files[0]);
\t \t \t \t })
\t \t \t })
\t \t }
\t }
}])
myRegi.service('multipartForm', ['$http', function($http){
\t this.post = function(uploadUrl, data){
\t \t var fd = new FormData();
\t \t for(var key in data)
\t \t \t fd.append(key, data[key]);
\t \t $http.post(uploadUrl, fd, {
\t \t \t transformRequest: angular.indentity,
\t \t \t headers: { 'Content-Type': undefined }
\t \t });
\t }
}])
}]);这是公共/ index.html的
<!DOCTYPE html>
<html ng-app="myRegi">
<head>
<title>Password Input Control</title>
<style>
table, th, td {
border: 1px light gray;
width: 40%;
height: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="controller/controller.js"></script>
</head>
<body>
<form name="myForm" action="/regi">
<div align="center" ng-controller="AppCtrl">
<table>
<tr>
<td>First Name :</td>
<td><input type="text" ng-model="user.Firstname" />
</td></tr>
<tr>
<td>Last Name :</td>
<td><input type="text" ng-model="user.Lastname" />
</td></tr>
<tr>
<td>City :</td>
<td><input type="text" ng-model="user.city" /></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="email" ng-model="user.email" /></td>
</tr>
<tr>
<td>User ID :</td>
<td><input type="text" ng-model="user.userid" /></td>
<tr>
<tr>
<td>Password:</td>
<td><input type="password" ng-model="user.password" /></td>
<tr>
<td>Image : </td>
<td><input multiple="multiple" file-model="myFile" type="file" enctype="multipart/form-data"/></td>
<br></tr>
<tr><td>
<input type="button" value = "Submit" ng-click="insert()"></td>
<td> <input type="reset"></td></tr>
</div>
</table>
</form>
</body>
</html>这是我server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var jwt = require('jsonwebtoken');
var multer = require('multer');
app.use(express.static(__dirname + "/public"));
// configure app to use bodyParser()
// this will let us get the data from a POST
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(multer({dest:__dirname+'/file/uploads/'}).any());
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/Regis_module');
var Userschema = require('./models/dbSchema');
app.post('/regi',function(req,res){
var schema = new Userschema({
FirstName : req.body.Firstname,
LastName : req.body.Lastname,
City : req.body.city,
Email : req.body.email,
Userid : req.body.userid,
Password : req.body.password,
myFile : req.body.myFile
});
console.log(req.body);
console.log(re.files);
schema.save(function(err) {
if (err)
res.send(err);
res.json({ message: 'Record Inserted', Firstname: req.body.Firstname, Lastname: req.body.Lastname, City:req.body.city, Email:req.body.email,
Userid:req.body.userid, Password :req.body.password ,myFile : req.body.myFile });
});
});
app.listen(3000);
console.log("listening to port 3000");这是我猫鼬架构（dbSchema.js）
var mongoose = require('mongoose');
var User = new mongoose.Schema({
FirstName: String,
LastName: String,
City : String,
Email : String,
Userid : String,
Password: String,
myFile : { data: Buffer, contentType: String }
});
module.exports = mongoose.model('user', User);请帮助我如何我可以解决这一问题，可以上传图像与所有细节？
@Rakesh_Chand，在您的代码的帮助下，我正在浏览器控制台上获取文件的详细信息，但图像不存储在文件夹中，并且所有字段都不存储在数据库中。我应该在server.js中做些什么改变。 –
你在console.log（$ scope.user）控制台中得到了什么;' – Rakeschand
你已经初始化$ scope.customer，值在$ scope.user中。 db如何获取数据？ 将客户更改为用户。 加上您从未将文件传递给该服务。在控制器 变化'multipartForm.post（的uploadURL，$ scope.user，$ scope.myfile）;' 在服务'变化this.post =函数（的uploadURL，数据，MYFILE）{ \t \t变种FD =新FORMDATA（）; \t \t for（var key in data） \t \t \t fd.append（key，data [key]）; fd.append（'myFile'，myFile）; \t \t $ http.post（uploadUrl，fd，{ \t \t \t transformRequest：angular。indentity， \t \t \t标题：{'Content-Type'：undefined} \t \t}）; \t}' – Rakeschand