Nó là hiệu quả hơn để gửi một tập tin trực tiếp.
Các base64 mã hóa của Content-Type: multipart/form-databổ sung thêm một 33% chi phí. Nếu máy chủ hỗ trợ, việc gửi các tệp trực tiếp sẽ hiệu quả hơn:
$scope.upload = function(url, file) {
var config = { headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
return $http.post(url, file, config);
};
Khi gửi POST với đối tượng File , điều quan trọng là phải đặt 'Content-Type': undefined. Các phương pháp XHR gửi sau đó sẽ phát hiện các đối tượng tập tin và tự động thiết lập các loại nội dung.
Để gửi nhiều tệp, hãy xem Thực hiện nhiều yêu cầu trực tiếp từ một danh sách tệp$http.post
Tôi hình dung mình nên bắt đầu với kiểu đầu vào = "tập tin", nhưng sau đó phát hiện ra rằng AngularJS không thể liên kết với điều đó ..
Phần <input type=file>tử không mặc định hoạt động với chỉ thị ng-model . Nó cần một chỉ thị tùy chỉnh :
Bản trình diễn hoạt động của Chỉ thị "select-ng-files" hoạt động với ng-model1
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 với loại nội dung multipart/form-data
Nếu ai đó phải gửi 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);
};
Khi gửi POST bằng API FormData , điều quan trọng là phải đặt 'Content-Type': undefined. Các phương pháp XHR gửi sau đó sẽ phát hiện các FormDatađối tượng và tự động thiết lập các tiêu đề kiểu nội dung để multipart / form-data với ranh giới thích hợp .