1
Ich erstelle ein einfaches Registrierungsformular mit MEAN. Alle Textwert von Form einreicht richtig, aber zum Zeitpunkt der Form Last in Browser-Konsole (controller.js) zeigen Fehler folgendeRegistrierungsformular mit Bild-Upload von 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:13550Das ist mein Controller/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 }
}])
}]);Und das ist public/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>Das ist mein 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");Das ist mein Mungo-Schema (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);Bitte, hilf mir, wie ich das Problem lösen kann und Bild hochladen mit allen Details?
@Rakesh_Chand, mit Hilfe Ihres Codes erhalte ich Details der Datei in der Browser-Konsole, aber Bild speichert nicht im Ordner und alle Felder werden nicht in db gespeichert. Welche Änderung sollte ich in server.js vornehmen? –
Was erhalten Sie in der Konsole für diese Zeile 'console.log ($ scope.user);' – Rakeschand
Sie haben $ scope.customer initialisiert und die Werte sind in $ scope.user. Wie kann DB Daten bekommen? Ändern Sie den Kunden zum Benutzer. plus Sie haben nie Datei an den Dienst übergeben. Änderung der Controller 'multipartForm.post (uploadUrl, $ scope.user, $ scope.myfile);' Änderung in Dienst 'this.post Funktion = (uploadUrl, Daten, myFile) { \t \t var fd = new Formulardaten(); \t \t für (var Schlüssel in Daten) \t \t \t fd.append (Schlüssel, Daten [Schlüssel]); fd.append ('myFile', myFile); \t \t $ http.post (HochladenUrl, Fd, { \t \t \t TransformAnfrage: eckig.identity, \t \t \t headers: {'Inhaltstyp': undefined} \t \t}); \t} ' – Rakeschand