angularjs $http file图片上传 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
url: API_URL+'uploadimage',
method: 'POST',
headers: {
'Content-Type': undefined
transformRequest: function() {
var formData = new FormData();
formData.append('file', $('#upfile')[0].files[0]);
return formD
}).success(function (data) {
console.log(data);
//返回上传后所在的路径
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的&& 第一次使用 AngularJs 的 $http 模块的时候，遇到过后台获取不到前台提交数据的问题，检查代码没有发现问题，先上代码。
angular.module("newsApp", [])
.constant("newsInfoUrl", "/WebPage/Page/NewsInfo/")
.factory("newsService", function($http) {
getNewsList: function (categoryId, callBack) {
//请求后台数据
$http.post("/WebPage/Page/GetNewsList",
//参数分类ID，后台获取不到
{ id: categoryId }
).then(function (resp) {
callBack(resp);
.controller("newsListCtrl", [
"$scope", "newsService", "newsInfoUrl", function($scope, newService, newsInfoUrl) {
$scope.cId = "";
var getNewsList = function() {
newService.getNewsList($scope.cId, function(resp) {
$scope.newsList = resp.
$scope.newsInfoUrl = newsInfoU
$scope.reload = getNewsL
[HttpPost]
public JsonResult GetNewsList(FormCollection collection)
{ 　　　　　　　//在这里 collection 里面没有数据
var catrgoryId = collection["id"];
var page = new PageContext
PageSize = <span style="color: #
var cList = new ContentBusiness().GetContentList(string.Empty, catrgoryId, page);
return Json(ConvertModel(cList));
奇怪了，难道提交数据有问题？抓包看看
原来问题出在这里，我们平时用 jquery post 提交数据是以 form-data 的形式提交的，而 AngularJs 以 json 格式提交的，所以后台获取不到了。
问题找到了，解决就容易了。
解决方法 &一&& 改后台，以参数的形式接收，不使用 FormCollection 或 Request.Form[]
[HttpPost]
public JsonResult GetNewsList(string id)
var page = new PageContext
PageSize = <span style="color: #
var cList = new ContentBusiness().GetContentList(string.Empty, id, page);
return Json(ConvertModel(cList));
如果参数比较多，可以定义一个model对象，model对象的属性对应前台提交的参数，以model对象作为后台响应方法的参数。
解决方法 &二&& 改AngularJs 提交数据的方式，使用 全局配置 配置$httpProvider 的 header 值，使用 transformRequest
　　　　　　　　　　对提交数据进行序列化，把 json 对象更改为字符串。
angular.module("newsApp", [])
.config(["$httpProvider", function ($httpProvider) {　　　　　//更改 Content-Type
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-charset=utf-8";
$httpProvider.defaults.headers.post["Accept"] = "*/*";
$httpProvider.defaults.transformRequest = function (data) {
//把JSON数据转换成字符串形式
if (data !== undefined) {
return $.param(data);
.constant("newsInfoUrl", "/WebPage/Page/NewsInfo/")
.factory("newsService", function ($http) {
getNewsList: function (categoryId, callBack) {
$http.post("/WebPage/Page/GetNewsList",
{id: categoryId}
).then(function (resp) {
callBack(resp);
.controller("newsListCtrl", [
"$scope", "newsService", "newsInfoUrl", function($scope, newService, newsInfoUrl) {
$scope.cId = "";
var getNewsList = function() {
newService.getNewsList($scope.cId, function(resp) {
$scope.newsList = resp.
$scope.newsInfoUrl = newsInfoU
$scope.reload = getNewsL
阅读(...) 评论()1362人阅读
javascript
用angularJS中的$http服务碰到了一个问题：运用$http.post方法向后台传递数据时，后台的php页面获取不到data参数传过来的&#20540;。
不论是这种姿势：
$http.post( &1.php&, { id: 1 }).success(function (data) {
console.log(data);
});还是这种姿势：
method: 'POST',
url: '1.php',
data: { id: 1 }
}).success(function (data) {
console.log(data);
});后台php中的$_POST或$_REQUEST都无法获取到data中的&#20540;：
echo json_encode($_POST);
?&输出为一个空数组。为了测试php本身是不是真的获取不到&#20540;，我就写了个表单测试下：&form action=&1.php& method=&post&&
&input type=&text& name=&tid&&
&input type=&submit& value=&submit&&
&/form&输出结果为：{&tid&:&2&}，也就是说表单里的&#20540;是可以获取的，但是用ajax发送的数据获取不了！
那么表单数据和ajax发送的post数据之间有什么差异呢？于是我悄悄瞄一&#30524;请求头...
1.表单的请求头部：
2.ajax发送的数据的请求头部：
问题一下子就出来了！表单发送的文本类型是表单类型，而angular的ajax默认发送的则是json数据。
那么怎么把Content-type给改了呢？于是我就打开了angular的官网，照着改一下请求头：
method: 'POST',
url: '1.php',
data: { id : 1 }
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}).success(function (data) {
console.log(data);
});于是输出结果为：{&{\&test\&:1}&:&&}，还是有问题。对象并没有自动地序列化（jQuery用习惯了都快忘了居然还有这个问题！）
那么解决方案有：
1.不写成对象的形式，直接写字符串：
method: 'POST',
url: '1.php',
data: 'test=1',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}).success(function (data) {
console.log(data);
2.重写angular中transformRequest，自己写一个转换方法：
method: 'POST',
url: '1.php',
data: $scope.data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
transformRequest: function ( data ) {
var str = '';
for( var i in data ) {
str += i + '=' + data[i] + '&';
return str.substring(0,str.length-1);
}).success(function (data) {
console.log(data);
3.重写angular中的transformRequest，简单粗暴地把jquery拿过来：
method: 'POST',
url: '1.php',
data: $scope.data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
transformRequest: function ( data ) {
return $.param(data);
}).success(function (data) {
console.log(data);
4.修改默认的transformations（这个不太熟，先看一&#30524;官网上怎么说的）：
Default Transformations
The&$httpProvider&provider
and&$http&service expose&defaults.transformRequest&and&defaults.transformResponse&properties.
If a request does not provide its own transformations then these will be applied.
You can augment or replace the default transformations by modifying these properties by adding to or replacing the array.
Angular provides the following default transformations:
Request transformations ($httpProvider.defaults.transformRequest&and&$http.defaults.transformRequest):
If the&data&property
of the request configuration object contains an object, serialize it into JSON format.
Response transformations ($httpProvider.defaults.transformResponse&and&$http.defaults.transformResponse):
If XSRF prefix is detected, strip it (see Security Considerations section below).If JSON response is detected, deserialize it using a JSON parser.
然后照抄：
app.config(['$httpProvider', function ( $httpProvider ) {
$httpProvider.defaults.transformRequest = function ( data ) {
var str = '';
for( var i in data ) {
str += i + '=' + data[i] + '&';
return str.substring(0,str.length-1);
}]);$http({
method: 'POST',
url: '1.php',
data: $scope.data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}).success(function (data) {
console.log(data);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1377次
排名：千里之外}