Il est plus efficace d'envoyer un fichier directement.
El encodage base64 de Content-Type: multipart/form-data ajoute 33% de frais généraux supplémentaires. Si le serveur le supporte, il est plus efficace d'envoyer les fichiers directement :
$scope.upload = function(url, file) {
var config = { headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
return $http.post(url, file, config);
};
Lors de l'envoi d'un POST avec un Objet du fichier il est important de définir 'Content-Type': undefined . Le site Méthode d'envoi XHR détectera alors le Objet du fichier et définir automatiquement le type de contenu.
Pour envoyer plusieurs fichiers, voir Faire de multiples $http.post Demandes directes à partir d'une liste de fichiers
Je me suis dit que je devais commencer avec input type="file", mais j'ai découvert qu'AngularJS ne peut pas se lier à ce
El <input type=file> ne fonctionne pas par défaut avec l'élément directive ng-model . Il a besoin d'un directive personnalisée :
Démonstration fonctionnelle de la directive "select-ng-files" qui fonctionne avec ng-model 1
angular.module("app",[]);
angular.module("app").directive("selectNgFiles", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<h1>AngularJS Input `type=file` Demo</h1>
<input type="file" select-ng-files ng-model="fileArray" multiple>
<h2>Files</h2>
<div ng-repeat="file in fileArray">
{{file.name}}
</div>
</body>
$http.post avec le type de contenu multipart/form-data
Si l'on doit envoyer multipart/form-data :
<form role="form" enctype="multipart/form-data" name="myForm">
<input type="text" ng-model="fdata.UserName">
<input type="text" ng-model="fdata.FirstName">
<input type="file" select-ng-files ng-model="filesArray" multiple>
<button type="submit" ng-click="upload()">save</button>
</form>
$scope.upload = function() {
var fd = new FormData();
fd.append("data", angular.toJson($scope.fdata));
for (i=0; i<$scope.filesArray.length; i++) {
fd.append("file"+i, $scope.filesArray[i]);
};
var config = { headers: {'Content-Type': undefined},
transformRequest: angular.identity
}
return $http.post(url, fd, config);
};
Lors de l'envoi d'un POST avec l'option API FormData il est important de définir 'Content-Type': undefined . Le site Méthode d'envoi XHR détectera alors le FormData et définit automatiquement l'en-tête du type de contenu comme étant multipart/form-data avec le limite appropriée .
1 votes
Je pense que ça pourrait aider : noypi-linux.blogspot.com/2013/04/
1 votes
Voir cette réponse : stackoverflow.com/questions/18571001/ Il existe de nombreuses options pour les systèmes qui fonctionnent déjà.
1 votes
Voir ici