comment télécharger un fichier multipart à l’aide de js spring angular mvc

J’essaye de télécharger un fichier en utilisant angularjs et spring MVC

J’ai un bean multipartResolver dans application-context.xml.

ma forme ressemble à ceci:

   Quote Identifier :    Choose  
 
  Please upload the file : *    
 Valid File  Invalid File 
    
 
 
 $scope.continueFileUpload=function (){ var uploadUrl=serverUrl+"continueFileUpload"; var formData=new FormData(); formData.append("file",file.files[0]); $http({ method: 'POST', url: uploadUrl, headers: {'Content-Type': false}, data: formData, transformRequest: function(data, headersGetterFunction) { return data; } }) .success(function(data, status) { alert("success"); }) };

contrôleur de ressort:

 @Controller public class FileUploadController { @RequestMapping(value = "/continueFileUpload", method = RequestMethod.POST) @ResponseBody public Ssortingng continueFileUpload(HttpServletRequest request, HttpServletResponse response){ MultipartHttpServletRequest mRequest; try { mRequest = (MultipartHttpServletRequest) request; mRequest.getParameterMap(); Iterator itr = mRequest.getFileNames(); while (itr.hasNext()) { MultipartFile mFile = mRequest.getFile(itr.next()); Ssortingng fileName = mFile.getOriginalFilename(); System.out.println(fileName); } } catch (Exception e) { e.printStackTrace(); } return null; }

Lorsque j’ajoute des données multipart / form pour l’en-tête, je reçois **the request was rejected because no multipart boundary was found** exceptions

Si je n’ai pas ajouté, je n’ai pas org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

 $scope.continueFileUpload=function (){ var uploadUrl=serverUrl+"continueFileUpload"; var formData=new FormData(); formData.append("file",file.files[0]); $http({ method: 'POST', url: uploadUrl, headers: {'Content-Type': undefined}, data: formData, transformRequest: function(data, headersGetterFunction) { return data; } }) .success(function(data, status) { alert("success"); }) };

Créer une directive sera le moyen le plus utile à cet égard. La directive suivante peut être utilisée.

 var myApp = angular.module('myApp', []); myApp.directive('fileModel', ['$parse', function ($parse) { return { ressortingct: '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]); }); }); } }; }]);

Service :

 myApp.service('fileUpload', ['$q','$http', function ($q,$http) { var deffered = $q.defer(); var responseData; this.uploadFileToUrl = function(file, uploadUrl){ var fd = new FormData(); fd.append('file', file); return $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: { 'Content-Type' : undefined} }) .success(function(response){ /* $scope.errors = response.data.value; */ console.log(response); responseData = response; deffered.resolve(response); return deffered.promise; }) .error(function(error){ deffered.reject(error); return deffered.promise; }); } this.getResponse = function() { return responseData; } }]);

Contrôleur :

 myApp.controller('myCtrl', ['$scope', '$q', 'fileUpload', function($scope, $q, fileUpload){ $scope.dataUpload = true; $scope.errVisibility = false; $scope.uploadFile = function(){ var file = $scope.myFile; console.log('file is ' ); console.dir(file); var uploadUrl = "/continueFileUpload"; fileUpload.uploadFileToUrl(file, uploadUrl).then(function(result){ $scope.errors = fileUpload.getResponse(); console.log($scope.errors); $scope.errVisibility = true; }, function(error) { alert('error'); }) }; }]);

HTML :

     
  × Errors! {{errors.data.value}}

Il suffit de cocher ce lien qui vous permet de savoir comment l’utiliser à partir de zéro si vous êtes nouveau dans les directives dans angularjs. Spring MVC upload de fichier avec AngularJS

Vraiment un bon pour le téléchargement de fichiers.