angular.js - angular post的Content-Type被设置，导致不能上传图片，求助！！

问题描述

angular项目中由于某些原因设置了以下代码：

// $locationProvider.html5Mode(true); $httpProvider.defaults.headers.post[’Content-Type’] = ’application/x-www-form-urlencoded;charset=utf-8’; /** * The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj * @return {String} */ var param = function (obj) { var query = ’’, name, value, fullSubName, subName, subValue, innerObj, i; for (name in obj) {value = obj[name];if (value instanceof Array) { for (i = 0; i < value.length; ++i) { subValue = value[i]; fullSubName = name + ’[’ + i + ’]’; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + ’&’; }}else if (value instanceof Object) { for (subName in value) { subValue = value[subName]; fullSubName = name + ’[’ + subName + ’]’; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + ’&’; }}else if (value !== undefined && value !== null) query += encodeURIComponent(name) + ’=’ + encodeURIComponent(value) + ’&’; } return query.length ? query.substr(0, query.length - 1) : query; }; // Override $http service’s default transformRequest $httpProvider.defaults.transformRequest = [function (data) { return angular.isObject(data) && String(data) !== ’[object File]’ ? param(data) : data; }];

结果导致现在文件不能上传，最简单的一个form表单提交都不行：

<form action='upload/url' name='form1' method='post' enctype='multipart/form-data'> <input name='file' type='file' accept='image/*'> <button type='submit' class='btn btn-primary btn-lg'>提交</button> </form>

向各位大神求助，怎么样能正常上传图片？急，很急啊，项目都已经延期一天了……谢谢！

问题解答

https://github.com/nervgh/ang... 拿去，不谢

showUpload: function (todo) {$uibModal.open({ animation: true, size: ’lg’, templateUrl: ’app/theme/components/upload/upload.html’, controller: function ($scope, FileUploader) {var uploader = $scope.uploader = new FileUploader({ url: basePath+’/admin/images/upload’});$scope.confirm=function () { console.log(uploader) if(uploader.queue.length<1){toastr.info(’请选择上传图片’);return } uploader.queue[0].upload();}// FILTERSuploader.filters.push({ name: ’imageFilter’, fn: function (item, options) {var type = ’|’ + item.type.slice(item.type.lastIndexOf(’/’) + 1) + ’|’;return ’|jpg|png|jpeg|bmp|gif|’.indexOf(type) !== -1; }});// CALLBACKSuploader.onAfterAddingFile = function (fileItem) { //console.info(’onAfterAddingFile’, fileItem);};uploader.onSuccessItem = function (fileItem, response, status, headers) { if(response.success){toastr.info(’上传成功’);todo(response);$scope.$dismiss(); }};uploader.onErrorItem = function (fileItem, response, status, headers) { toastr.info(’上传失败！’);}; }}); }

(function () { ’use strict’; app.directive(’ngThumb’, ngThumb).directive(’fileInputStyle’, fileInputStyle); /** @ngInject */ function ngThumb($window) {var helper = { support: !!($window.FileReader && $window.CanvasRenderingContext2D), isFile: function (item) {return angular.isObject(item) && item instanceof $window.File; }, isImage: function (file) {var type = ’|’ + file.type.slice(file.type.lastIndexOf(’/’) + 1) + ’|’;return ’|jpg|png|jpeg|bmp|gif|’.indexOf(type) !== -1; }};return { restrict: ’A’, template: ’<canvas/>’, link: function (scope, element, attributes) {if (!helper.support) return;var params = scope.$eval(attributes.ngThumb);if (!helper.isFile(params.file)) return;if (!helper.isImage(params.file)) return;var canvas = element.find(’canvas’);var reader = new FileReader();reader.onload = onLoadFile;reader.readAsDataURL(params.file);function onLoadFile(event) { var img = new Image(); img.onload = onLoadImage; img.src = event.target.result;}function onLoadImage() { var width = params.width || this.width / this.height * params.height; var height = params.height || this.height / this.width * params.width; canvas.attr({width: width, height: height}); canvas[0].getContext(’2d’).drawImage(this, 0, 0, width, height);} }}; } function fileInputStyle() {return { restrict: ’A’, link: function ($scope, element, attrs) {bind_button(make_form(element, ’选择文件’));function make_form($el, text) { $el.wrap(’<p></p>’); $el.hide(); $el.after(’<p class='input-append input-group'><span class='input-group-btn'><button type='button'>’ + text + ’</button></span><input name='textfiles' type='text'></p>’); return $el.parent();};function bind_button($wrap) { $wrap.find(’.input-append’).click(function (e) {e.preventDefault(); $wrap.find(’input[type='file']’).click(); });}; }}; }})();

<p class='modal-content'> <p class='modal-header'><button type='button' ng-click='$dismiss()' aria-label='Close'> <em class='ion-ios-close-empty sn-link-close'></em></button><h4 id='myModalLabel'>上传图片</h4> </p> <p class='modal-body'><form name='uploadForm'> <p class='form-group'><p class='col-sm-12'> <input type='file' nv-file-select uploader='uploader' file-input-style/><br/> <table class='table'><thead><tr> <th width='30%'>名称</th> <th ng-show='uploader.isHTML5'>大小</th> <th ng-show='uploader.isHTML5'>进度</th> <th>状态</th> <th>操作</th></tr></thead><tbody><tr ng-repeat='item in uploader.queue'> <td><strong>{{ item.file.name }}</strong><p ng-show='uploader.isHTML5' ng-thumb='{ file: item._file, height: 100 }'></p> </td> <td ng-show='uploader.isHTML5' nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td> <td ng-show='uploader.isHTML5'><p style='margin-bottom: 0;'> <p role='progressbar' ng-style='{ ’width’: item.progress + ’%’ }'></p></p> </td> <td class='text-center'><span ng-show='item.isSuccess'><i class='glyphicon glyphicon-ok'></i></span><span ng-show='item.isCancel'><i class='glyphicon glyphicon-ban-circle'></i></span><span ng-show='item.isError'><i class='glyphicon glyphicon-remove'></i></span> </td> <td nowrap><button type='button' ng-click='item.upload()'ng-disabled='item.isReady || item.isUploading || item.isSuccess'> <span class='glyphicon glyphicon-upload'></span> 上传</button><button type='button' ng-click='item.cancel()'ng-disabled='!item.isUploading'> <span class='glyphicon glyphicon-ban-circle'></span> 取消上传</button><button type='button' ng-click='item.remove()'> <span class='glyphicon glyphicon-trash'></span> 移除</button> </td></tr></tbody> </table></p> </p></form> </p> <p class='modal-footer'><button type='button' ng-click='$dismiss()'>关闭</button><button type='button' ng-click='confirm()'>确定</button> </p></p>

题主提了两个问题1.为什么做了header设置 2.如何上传图片

一、为什么做了header设置，在base级别httpProvider添加header设置

http://stackoverflow.com/ques...

公司程序员应该参考这个问题。你们公司的后端api交互使用了Content-Type: x-www-form-urlencoded, 而angular使用了Content-type:application/json.所以做了改变Content-type和序列化。 题主可以参考。

二、上传图片题主的描述，不是很明白是怎么发起这次提交的。但是问题是因为文件提交的content-type设置错误。提供一种采用FormData提交的方法：

var fd = new FormData();fd.append(’file’, file);$http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: {’Content-Type’: undefined}}).success(function(){}).error(function(){});回答3：

你js那段代码就是要把数据encode成x-www-form-urlencoded的形式。但是你的html中没有进行数据绑定，这肯定不行！所以我怀疑你根本还没搞懂angularjs的使用。而且，你是怎么post数据的也没说清楚，谁知道你的问题出在哪啊？

把代码贴全再来吧