angular httpClient访问的请求的时候headers挂不上数据

解决angularjs中post参数获取不到的问题的方法：

当使用angularjs发送post请求时:

1 $http({

2 method : "post",

3 url : "./account/add",

4 data : {name:"123",passwd:123}

5 })

后台springMVC接受不到参数

public String add(@RequestParam String name, @RequestParam String passwd) {

}

因为angularjs发送post请求时参数列表类型是 Payload(可以通过chrome调试工具的network查看), 而后台想要接收参数的话, 参数列表的类型需为 Form data(用jquery发送post请求时就是该类型), 所以需要做如下调整

$http({

method : "post",

url : "./account/add",

data : $.param(params),

headers: {'Content-Type': 'application/x-www-form-urlencodedcharset=UTF-8'}

})

利用angular-file-upload组件就可以了。

angular-file-upload 是一个基于HTML5技术的文件上传轻量级 AngularJS指令（directive），当浏览器不支持时转为采用 FileAPI polyfill技术实现(基于Flash)。

参考:

//inject angular file upload directives and service.angular.module('myApp', ['angularFileUpload'])var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {

$scope.onFileSelect = function($files) {//$files: an array of files selected, each file has name, size, and type.

for (var i = 0i <$files.lengthi++) { var file = $files[i]

$scope.upload = $upload.upload({

url: 'server/upload/url', //upload.php script, node.js route, or servlet url

//method: 'POST' or 'PUT',

//headers: {'header-key': 'header-value'},

//withCredentials: true,

data: {myObj: $scope.myModelObj},

file: file, // or list of files ($files) for html5 only

//fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)

// customize file formData name ('Content-Disposition'), server side file variable name.

//fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file'

// customize how data is added to formData. See #40#issuecomment-28612000 for sample code

//formDataAppender: function(formData, key, val){}

}).progress(function(evt) {console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total))

}).success(function(data, status, headers, config) {// file is uploaded successfully

console.log(data)

}) //.error(...)

//.then(success, error, progress)

// access or attach event listeners to the underlying XMLHttpRequest.

//.xhr(function(xhr){xhr.upload.addEventListener(...)})

}/* alternative way of uploading, send the file binary with the file's content-type. Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed.It could also be used to monitor the progress of a normal http post/put request with large data*/

// $scope.upload = $upload.http({...}) see 88#issuecomment-31366487 for sample code.

}

}]

html:

<!-- shim is needed to support upload progress/abort for HTML5 and non-HTML5 FormData browsers.--><!-- angular-file-upload-html5-shim.js could be used instead of angular-file-upload-shim if your app targets HTML5 browsers only (not IE8-9) --><!-- Note: shim.js MUST BE PLACED BEFORE angular.js and angular-file-upload.js AFTER angular.js--><script src="angular-file-upload-shim.min.js"></script>

<script src="angular.min.js"></script>

<script src="angular-file-upload.min.js"></script>

<div ng-controller="MyCtrl">

<input type="text" ng-model="myModelObj">

<input type="file" ng-file-select="onFileSelect($files)">

<input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">

<div class="button" ng-file-select="onFileSelect($files)" data-multiple="true"></div>

<div ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional-css-class-name-or-function"

ng-show="dropSupported">drop files here</div>

<div ng-file-drop-available="dropSupported=true"

ng-show="!dropSupported">HTML5 Drop File is not supported!</div>

<button ng-click="upload.abort()">Cancel Upload</button>

</div>

---