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

【问题标题】：AngularJS - Missing boundary in multipart/form-data POSTAngularJS - 多部分/表单数据 POST 中缺少边界
【发布时间】：2016-05-01 04:47:50
【问题描述】：

我有以下代码：

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 调用 form 标签。

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

提交表单后，控制台返回如下信息：

警告：multipart/form-data POST 数据中缺少边界 Unknown 行 0

此代码在我的所有项目中始终正常运行，但这次出现此错误，我无法找到解决方案。
这个项目和其他项目的唯一区别是我使用的是 UI-Router。我试图寻找它们之间的联系，但我一无所获。

有谁知道可能导致此错误的原因以及如何修复它？

【问题讨论】：

标签： php angularjs post file-upload angular-ui-router

【解决方案1】：

上网看了半天各种功能，才换了header：

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

收件人：

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

代码再次正常运行。

感谢您的帮助。

【讨论】：

【解决方案2】：

我已经解决了从标题中删除 Content-Type 的问题，并且它可以正常工作

【讨论】：

最佳答案... :)

【解决方案3】：

如果您通过属性“header”解析它，为什么要删除transformRequest中的内容类型？

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

【讨论】：

答案很简单：我复制了代码。 =) 是的，我试过不删除。但一切都没有改变。错误继续。
这是来自 PHP 的东西。也许是因为 php 文件是空的。尝试使用 $_FILES 或类似的东西捕获文件。另外，你能分享一下你在其他项目中使用的php文件的代码吗？
这是我做的第一件事。当我第一次测试时，PHP 脚本已经完成。当我看到它不起作用时，我开始评论代码以找出错误在哪里。问题是我只是评论了整个脚本并且错误仍然存在。我也尝试清空缓存并使用 CCleaner，但没有任何改变。
Julio，我已经对其进行了测试并且可以正常工作。我在
内部使用了并得到了响应PHP，即
我添加了我的表单示例（只是删除了其他输入）。我一直在使用插件“jasny-bootstrap”和“ng-file-upload”。正如我所说，唯一的区别是这次我使用 UI-Router 代替 ngRouter，但我无法在任何地方找到连接。

【解决方案4】：

而不是以multipart/form-data 发送数据：

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

您应该将其发送为application/json:

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

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

【讨论】：

两者差别很大。