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>
向各位大神求助，怎么樣能正常上傳圖片？急，很急啊，項目都已經延期一天了……謝謝！
問題解答
回答1：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數據的也沒說清楚，誰知道你的問題出在哪??？
把代碼貼全再來吧
網公網安備