nodejs + multer + angularjs zum Hochladen ohne Umleitung

Question

Ich verwende Nodejs + Multer + angularjs zum Hochladen von Dateien auf dem Server.

Ich habe eine einfache HTML-Datei:

<form action="/multer" method="post" enctype="multipart/form-data"> 
<input type="file" id="photo" name="photo"/> 
<button id="Button1">Upload</button> 
</form> 

NodeJS Teil:

var multer = require('multer'); 

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
     cb(null, './uploads/') 
    }, 
    filename: function (req, file, cb) { 
     cb(null, file.originalname) 
    } 
}) 

app.post('/multer', upload.single('photo'), function (req, res) { 
    res.end("File uploaded."); 
}); 

das funktioniert perfekt und die Datei erfolgreich hochgeladen.

aber diese Umleitung mich nach "/ multer" nach dem Hochladen der Datei (wegen des Formularelements).
Wie bleibe ich auf der gleichen Seite? ..possibly mit AngularJS
ich dies so versucht:

eine HTML-Datei Winkel machen:

<section data-ng-controller="myCtrl"> 
<input type="file" id="photo" name="photo"/> 
<button id="Button1" ng-click="f()">Upload</button> 
</section> 

und AngularJS Controller:

angular.module('users').controller('myCtrl',[$scope,function($scope){ 
    $scope.f=function(){ 
     var photo = document.getElementById('photo'); 
     var file = photo.files[0]; 
     if (file) { 

      //code to make a post request with a file object for uploading????? 

      //something like.. 
      //$http.post('/multer', file).success(function(response) { 
      //console.log("success"); 
      //}); 
     } 
    } 
}]); 

kann mir jemand helfen mit DER CODE FÜR EINE POSTANFORDERUNG MIT EINEM DATEIOBJEKT ZUM HOCHLADEN MIT MULTER VON ANGULARJS CONTROLLER?

dank

Answer 1

AngularJS Richtlinie:

angular.module('users').directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function(){ 
      scope.$apply(function(){ 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
}; 
}]); 

Angular html-Datei:

<input type="file" file-model="myFile"/><br><br> 
<button ng-click="uploadFile()">Upload</button> 

AngularJS Controller:

$scope.uploadFile = function(){ 

     var file = $scope.myFile; 
     var uploadUrl = "/multer"; 
     var fd = new FormData(); 
     fd.append('file', file); 

     $http.post(uploadUrl,fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
      console.log("success!!"); 
     }) 
     .error(function(){ 
      console.log("error!!"); 
     }); 
    }; 

NodeJS Server Routendatei:

var multer = require('multer'); 
var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
     cb(null, './uploads/') 
    }, 
    filename: function (req, file, cb) { 
     cb(null, file.originalname+ '-' + Date.now()+'.jpg') 
    } 
}); 
var upload = multer({ storage: storage }); 

app.post('/multer', upload.single('file')); 

Viel Spaß!