使用 AngularJS 和 ngResource 将范围变量转换为 FormData (multipart/form-data) 时出现问题

Question

编辑：

已修复

不要将 Content-Type 设置为字符串 'undefined' 而是使用 undefined 来代替，这样效果会更好。

我目前正在使用 this 关于如何将表单（带文件）转换为 multipart/form-data 的解决方案，但为了便于阅读，我将解释我使用的内容。

后台在ASP.NET5.

我正在使用此指令将文件输入绑定到 angular 范围变量：

var app = angular.module('app', ['ngResource'])
                        .directive('filesModel', filesModelDirective);

function filesModelDirective() {
    return {
        controller: function ($parse, $element, $attrs, $scope) {
            var exp = $parse($attrs.filesModel);

            $element.on('change', function () {
                exp.assign($scope, this.files);
                $scope.$apply();
            });
        }
    };
}

然后在页面上这样做：

<input type="file" files-model="newvisit.files" id="inputImage" />

这是在ngResource中使用的，这就是出错的地方。如果你使用调试器；您可以看到每个值及其键，它还正确地附加了文件。

save: {
    method: 'POST',
    transformRequest: function (data) {
        if (data === undefined) return data;

        var fd = new FormData();
        angular.forEach(data, function (value, key) {
            if (value instanceof FileList) {
                if (value.length == 1) {
                    fd.append(key, value[0]);
                } else {
                    angular.forEach(value, function (file, index) {
                        fd.append(key + '_' + index, file);
                    });
                }
            } else {
                fd.append(key, value);
            }
        });

        return fd;
    },
    headers: { 'Content-Type': 'undefined', enctype: 'multipart/form-data' }
 }

我可以在 postman 中创建一个 multipart/form-data post，后端将接受它，如下所示。

自定义 post:

后端：

请忽略'files'变量名，已经改成'data'

然而，当在网页上填写表格并让 Angular 创建一个 FormData() object 它没有正确格式化（？不知道该放什么），我截获了这使用邮递员：

而且后端将无法投射。

可以看到截取的post中的相关header'Content-Type'和'enctype'被正确设置为'undefined'和'multipart/form-data'

我不确定问题是否出在 ASP.NET 5 的某个地方，但是因为它可以接受自定义 post 我不确定。

编辑：我只是尝试手动将 headers 'Content-Type': 'undefined' 和 'enctype': 'multipart/form-data' 放入我的自定义 post而且它不起作用，ASP.NET 是这里不够用还是我做错了什么？

EDIT2：我通过取消设置 'Content-Type' header 并设置 'enctype' header 让我的自定义 post 再次工作，我不能把 'Content-Type' 放在 undefined 上，否则 ASP.NET 不会接受。（如果我查看成功请求 HeaderContentType 的 headers 设置为未定义）

这可能是 ASP.NET 的错误吗？

Answer 1

不要把你的 Content-Type 作为字符串 'undefined' 孩子们，使用 undefined 代替。

使用 AngularJS 和 ngResource 将范围变量转换为 FormData (multipart/form-data) 时出现问题

Trouble converting scope variable to FormData (multipart/form-data) using AngularJS and ngResource

asp.net

multipartform-data

form-data

angularjs

angularjs-directive