सीधे फ़ाइल भेजना अधिक कुशल है।
बेस 64 एन्कोडिंग की Content-Type: multipart/form-dataएक अतिरिक्त 33% भूमि के ऊपर कहते हैं। यदि सर्वर इसका समर्थन करता है, तो फाइलों को सीधे भेजना अधिक कुशल है:
$scope.upload = function(url, file) {
var config = { headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
return $http.post(url, file, config);
};
फ़ाइल ऑब्जेक्ट के साथ POST भेजते समय , इसे सेट करना महत्वपूर्ण है 'Content-Type': undefined। एक्सएचआर भेजने विधि तो पता लगा लेगा फ़ाइल वस्तु और स्वचालित रूप से सामग्री प्रकार निर्धारित किया है।
कई फाइलें भेजने के लिए, एक फाइललिस्ट से सीधे कई अनुरोध करना देखें$http.post
मुझे लगा कि मुझे इनपुट प्रकार = "फ़ाइल" से शुरू करना चाहिए, लेकिन फिर पता चला कि AngularJS उस से बंध नहीं सकता है।
<input type=file>तत्व के साथ डिफ़ॉल्ट रूप से काम नहीं करता है एनजी मॉडल के निर्देश । इसे एक कस्टम निर्देश की आवश्यकता है :
"सिलेक्ट-एनजी-फाइल्स" का वर्किंग डेमो जो 1 के साथ काम करता हैng-model
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 सामग्री प्रकार के साथ multipart/form-data
अगर किसी को भेजना है 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);
};
FormData API के साथ POST भेजते समय , इसे सेट करना महत्वपूर्ण है 'Content-Type': undefined। एक्सएचआर भेजने विधि तो पता लगा लेगा FormDataवस्तु और स्वचालित रूप से करने के लिए सामग्री प्रकार हैडर सेट बहुखण्डीय / फार्म-डेटा के साथ उचित सीमा ।