angular.js - The Content-Type of angular post is set, resulting in the inability to upload images. Please help! !

Question

The following code is set in the angular project for some reasons:

    // $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;
    }];

As a result, files cannot be uploaded now, and even the simplest form submission does not work:

  <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>

Asking for help from all the experts, how can I upload pictures normally? Urgent, very urgent, the project has been delayed for one day... Thank you!

Answer 1

https://github.com/nervgh/ang... Take it, you’re welcome

 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>

Answer 2

The subject asked two questions: 1. Why did we set the header? 2. How to upload pictures

1. Why do you have to set the header? Add the header setting to the base level httpProvider

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

Company programmers should refer to this question. Your company's back-end api interaction uses Content-Type: x-www-form-urlencoded, and angular uses Content-type: application/json. So the Content-type and serialization were changed. The subject can refer to it.

2. Upload pictures
The subject’s description is not very clear as to how this submission was initiated. But the problem is because the content-type of the file submission is set incorrectly. Provide a method to submit using FormData:

var fd = new FormData();
fd.append('file', file);

$http.post(uploadUrl, fd, {
   transformRequest: angular.identity,
   headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});

Answer 3

Your js code is to encode the data into x-www-form-urlencoded form. But there is no data binding in your html, which is definitely not possible! So I suspect that you haven't understood the use of angularjs at all.
Also, you didn’t explain clearly how you posted the data. Who knows where your problem lies?

Come back after posting the complete code