故障范围的变量转换为FORMDATA（的multipart / form-data的）使用AngularJS和ngResource [英] Trouble converting scope variable to FormData (multipart/form-data) using AngularJS and ngResource

问题描述

编辑：

固定它

不要将内容类型设置为字符串未定义，但使用未定义而是趋向于更好地工作。

我目前使用有关如何在形式转换（与文件）这解决方案为multipart / form-数据但我会解释一下我用简单易读。

I'm currently using this solution on how to convert a form (with file) to multipart/form-data but I will explain what I used for easy readability.

后端是ASP.NET 5。

The backend is in ASP.NET 5.

我使用这个指令的输入角度范围的变量文件绑定：

I'm using this directive to bind the file input to an angular scope variable:

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

，然后做这个页面上：

and then doing this on the page:

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

这是ngResource使用，这是哪里出了问题。如果你使用调试器;你可以看到每个值及其关键的，它也十分重视正确的文件。

This is used in ngResource, this is where it goes wrong. If you use debugger; you can see each of the values and its key, it also correctly attaches the file.

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

我可以创建邮递员的multipart / form-data发布和后端将接受它喜欢如下图所示。

I can create a multipart/form-data post in postman and the backend will accept it like seen below.

自定义后：

后端：

的忽略'文件'变量的名字吗，已经改成了数据的

在网页上填写表单时，让角创建FORMDATA（）对象是未格式化但是它正确，我截取这个邮差使用：

However when filling out the form on the webpage and letting Angular create a FormData() object it doesn't format(? no idea what to put here) it correctly, I intercepted this using Postman:

和后端将无法施放它。

你可以从截获后看到相关的头内容类型和加密类型被正确地设置为不确定和的multipart / form-data的

As you can see the relevant headers 'Content-Type' and 'enctype' from the intercepted post are correctly set to 'undefined' and 'multipart/form-data'

我不知道问题出在ASP.NET 5的地方，但因为它可以接受一个自定义后我不知道。

I'm not sure if the problem lies somewhere with ASP.NET 5 but since it can accept a custom post I'm not sure.

编辑：我只是想手动把头内容类型：未定义和加密类型：在我的自定义后'的multipart / form-data的'，它不工作，ASP.NET是短期下降这里还是我做错了什么？

I just tried manually putting the headers 'Content-Type': 'undefined' and 'enctype': 'multipart/form-data' in my custom post and it doesn't work, is ASP.NET falling short here or am I doing something wrong?

EDIT2：我有我的自定义后留下的内容类型头取消设置，并设置加密类型头再次合作，我不能把'Content-Type的未定义或ASP.NET将不接受它。 （如果我看succesfull要求HeaderContentType的头被设置在不确定的虽然）

I got my custom post working again by leaving the 'Content-Type' header unset and setting the 'enctype' header, I can't put 'Content-Type' on undefined or ASP.NET won't accept it. (if I look at the headers of the succesfull request HeaderContentType is set on undefined though)

也许这是用ASP.NET中的错误？

Might this be a bug with ASP.NET?

推荐答案

不要把你的内容类型为未定义孩子一个字符串，请使用不确定的来代替。

Don't put your Content-Type as a string 'undefined' kids, use undefined instead.

这篇关于故障范围的变量转换为FORMDATA（的multipart / form-data的）使用AngularJS和ngResource的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！