AngularJS - multipart/form-data POST中缺少边界

Question

我有以下代码:

app.controller("carousels", function($http, $location, $rootScope, $state, $stateParams, $scope, PopUp, DTColumnDefBuilder, DTOptionsBuilder) {

    { ... }

    $scope.save = function() {
        $http({
            method: "POST",
            url: "./controllers/carousels/create.php",
            headers: {
                "Content-Type": "multipart/form-data"
            },
            data: $scope.carousels,
            transformRequest: function (data, headersGetter) {
                var formData = new FormData(),
                    headers = headersGetter();

                angular.forEach(data, function (value, key) {
                    formData.append(key, value);
                });

                delete headers["Content-Type"];

                return formData;
            }
        }).success(function(response) {
            console.log(response);
        });
    };
});

create.php文件完全为空,并且在表单标记上通过ng-submit调用save函数.

<form name="form" ng-submit="save()">
    <div class="box box-default">
        <div class="box-header with-border"></div>

        <div class="box-body">
            <div class="form-group" has-error>
                <label for="image">{{ "txt.pages.carousels.fields.image" | translate }}*</label>
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div style="display: table-row;">
                        <div class="form-control" data-trigger="fileinput">
                            <i class="glyphicon glyphicon-file fileinput-exists"></i>
                            <span class="fileinput-filename"></span>
                        </div>
                        <span class="btn btn-default btn-file input-group-addon">
                            <span>{{ "txt.action.file" | translate }}</span>
                            <input type="file" accept="image/*" name="image" id="image" ng-model="carousels.image" ngf-select required>
                        </span>
                    </div>

                    <div class="fileinput-preview thumbnail" data-trigger="fileinput">
                        <img ng-src="./uploads/{{ carousels.image }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="box-footer">
            <button type="submit" class="btn btn-default">{{ "txt.action.save" | translate }}</button>
        </div>
    </div>
</form>

提交表单后,控制台将返回以下消息:

警告:在第0行的Unknown中,multipart/form-data POST数据中缺少边界

这段代码总是在我的所有项目中都能正常工作,但这一次出现了这个错误,我无法找到解决方案.
这个项目与其他项目的唯一区别在于,我正在使用UI-Router.我试图寻找他们之间的联系,但我一无所获.

有谁知道可能导致此错误的原因以及如何解决？

Answer 1

经过很长一段时间,通过互联网查看各种功能,只需更改标题:

headers: {
    "Content-Type": "multipart/form-data"
},

至:

headers: {
    "Content-Type": undefined
},

并且代码再次正常运行.

感谢您的帮助.