社群 學習 工具庫 休閒
搜尋
繁体中文
angular.js - angular post的Content-Type被設置，導致不能上傳圖片，求助！ ！
漂亮男人
漂亮男人 2017-05-15 17:10:24
0
3
765

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 id="file" name="file" type="file" accept="image/*">
    <button type="submit" class="btn btn-primary btn-lg">提交</button>
  </form>

向各位大神求助，怎麼樣能正常上傳圖片？急，很急啊，專案都已經延期一天了……謝謝！

漂亮男人
漂亮男人

全部回覆(3)
漂亮男人
漂亮男人2017-05-15 17:12:24 3樓

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();
                        }
                        // FILTERS
                        uploader.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;
                            }
                        });
                        // CALLBACKS
                        uploader.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 class="btn btn-default" type="button">' + text + '</button>\
                        </span><input class="input-large form-control" 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" class="close" ng-click="$dismiss()" aria-label="Close">
            <em class="ion-ios-close-empty sn-link-close"></em>
        </button>
        <h4 class="modal-title" 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 class="progress" style="margin-bottom: 0;">
                                    <p class="progress-bar" 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" class="btn btn-success btn-xs" ng-click="item.upload()"
                                        ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                    <span class="glyphicon glyphicon-upload"></span> 上传
                                </button>
                                <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()"
                                        ng-disabled="!item.isUploading">
                                    <span class="glyphicon glyphicon-ban-circle"></span> 取消上传
                                </button>
                                <button type="button" class="btn btn-danger btn-xs" 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" class="btn btn-primary" ng-click="$dismiss()">关闭</button>
        <button type="button" class="btn btn-info" ng-click="confirm()">确定</button>
    </p>
</p>

點贊 +0
新增回覆
淡淡烟草味
淡淡烟草味2017-05-15 17:12:24 2樓

題主提了兩個問題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(){
});
點贊 +0
新增回覆
给我你的怀抱
给我你的怀抱2017-05-15 17:12:24 1樓

你js那段程式碼就是要把資料encode成x-www-form-urlencoded的形式。但是你的html中沒有進行資料綁定，這肯定不行！所以我懷疑你根本還沒搞懂angularjs的使用。
而且，你是怎麼post數據的也沒說清楚，誰知道你的問題出在哪啊？

把程式碼貼全再來吧

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板