直接发送文件效率更高。
该编码的base64的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);
};
发送带有File对象的POST时，进行设置很重要'Content-Type': undefined。然后，XHR send方法将检测File对象并自动设置内容类型。
要发送多个文件，请参阅进行多次$http.post从文件列表直接请求
我以为我应该从输入type =“ file”开始，但是后来发现AngularJS无法绑定到该文件。
<input type=file>默认情况下，该元素不适用于ng-model指令。它需要一个自定义指令：
适用于1的“ select-ng-files”指令的工作演示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。然后，XHR send方法将检测到FormData对象，并自动将内容类型标头设置为具有适当边界的multipart / form-data。