AngularJS - 多部分/表单数据 POST 中缺少边界


AngularJS - Missing boundary in multipart/form-data POST

我有以下代码:

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);
        });
    };
});

创建.php文件完全为空,保存函数由表单标签上的 ng-submit 调用。

<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
行的未知中多部分/表单数据 POST 数据中缺少边界

这段代码在我的所有项目中总是正常工作,但这次给出了这个错误,我找不到解决方案。
这个项目和其他项目之间的唯一区别是,我在这里使用的是UI路由器。我试图寻找它们之间的联系,但我一无所获。

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

经过很长时间,在互联网上查看了各种功能,只是更改了标题:

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

自:

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

并且代码再次正常运行。

谢谢你的帮助。

我已经解决了从标题中删除内容类型及其完美运行的问题

如果您通过属性"header"解析 transformRequest 中的内容类型,为什么要删除它?

您是否尝试不删除内容类型?

而不是以multipart/form-data的形式发送数据:

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

您应该将其发送为application/json

headers: {
    'Content-Type': 'application/json'
}

如果问题仍然存在,您可能还需要将data更改为 params