如何在 Angular Typescript 中将数组作为表单数据发布答案

【问题标题】：How to post array as form data in Angular Typescript如何在 Angular Typescript 中将数组作为表单数据发布
【发布时间】：2019-11-23 05:32:32
【问题描述】：

我在 Angular 8 中工作并在 .net core 2.2 中使用 web.api

我有一个包含一些“常规”输入、一个文件和多选复选框的表单。

问题是多选复选框，我把它变成了一个数字数组。在将数据发布到服务器之前，我将 FormGroup 转换为 FormData 并手动添加文件以及来自多选复选框的整数数组：

data.append('locationsSecondaryIds',
    new Blob( [ JSON.stringify(this.profilePersonalData.locationsSecondaryIds)], { type : 'application/json' } ) );
    if (this.file) {
        data.append('document', this.file, this.file.name);
    }

locationsSecondaryIds 是一个数字[]。

我也尝试过忽略 Blob 并将其作为 [1,1] 发送，但是当服务器到达服务器时，它无法将其转换为列表

有什么好的建议吗？

提前非常感谢:-)

【问题讨论】：

你能解释更多你想要做什么吗？您是否将多个选中的复选框值作为数组？如果数组正在获取，那么您必须将数组数据附加到表单数据然后想要将数据发送到服务器？
非常感谢您的回复。问题是在将数组作为表单数据（[FromForm]）发布时在服务器上接收数组，我这样做是因为我也在发送文件。
您从客户端发送的数据类型也必须由服务器相同类型的数据处理。例如，如果您从客户端发送Application/Json 类型的数据，那么服务器必须具有该数据的设置才能正确处理它。 blob 类型也一样
只要我不包含数组，它就可以正常工作。在 Api 中我使用 [Consumes("multipart/form-data")]

标签： arrays angular typescript http-post asp.net-core-webapi

【解决方案1】：

我遇到了同样的情况，这就是我的做法。

我在 Angular 中的 component.ts 文件：

const formData = new FormData();
formData.append('Parameter1', "Some String Value");
formData.append('Parameter2', this.currentUserId.toString());
for (const index in this.arrayValues) 
{
    // instead of passing this.arrayValues.toString() iterate for each item and append it to form.
    formData.append(`ArrayValue[${index}]`,this.arrayValues[index].toString());
}
for (const file of this.importedFiles)
{
    formData.append('Files', file);
}

现在将它发布到 asp.net core web api，它应该可以工作了。

我的服务器端 C# 类：

public class SomeClass
{
    public string Parameter1 { get; set; }
    public int Parameter2 { get; set; }
    public string[] ArrayValue { get; set; }
    public IFormFile[] Files { get; set; }
}

注意：确保在您的操作方法中使用[FromForm]装饰您的参数。

Asp.Net Core Web Api Controller 动作方法：

public async Task<IActionResult> SomeMethod([FromForm] SomeClass someClass)
{
    ...
}

【讨论】：

我试过这样做，但文件总是为空......你知道为什么会发生这种情况吗？我在将它添加到 FormData 之前使用了 console.log()，它们看起来很好（我使用 File 类型来处理 angular 文件）。
服务器端的IFormFile[] 属性的名称应为Files。如果你有不同的名字，它不会绑定，它将为空。
后来我发现问题是我试图在一个嵌套对象中执行它，由于某种原因不适用于文件，当我使用父对象接收它工作的文件时，谢谢
@fingers10 它对我有用。你试过用对象代替数字吗？
@SJNE 你能解释更多吗？

【解决方案2】：

您可以尝试选择多个复选框值并将其附加到表单数据中。在提交按钮上：

let subs = [];
subs = this.skillForm.value.subjects; // here subject refers to multi select dropdown
let subString = subs.toString(); // you can let the values to be int as per your DB 
//column
let fd = new FormData();
fd.append('values',subString);

【讨论】：

非常感谢您的回复！当按照您的建议发送时，我从服务器 {"errors":{"LocationsSecondaryIds":["The value '1007,1006,1005' is not valid."]},"title":"One or出现更多验证错误。","status":400,"traceId":"8000001c-0001-fb00-b63f-84710c7967bb"}
您需要检查您的列接受什么字符串/整数值。相应地改变。
什么栏目？数组转换成的api上的对象是一个List
如果是 int 则不需要转换为字符串类型。 :)
如果我不将其转换为字符串，我会得到：'number[]' 类型的参数不可分配给'string |斑点'。类型 'number[]' 不能分配给类型 'string'。

【解决方案3】：

fingers10 的回答对我有用。对于我的代码，我必须添加一个对象数组，为此我使用了他的答案和以下代码。

    for (const index in voteData.feedMessageTags) {
        // instead of passing this.arrayValues.toString() iterate for each item and append it to form.
        formData.append(`feedMessageTags[${index}].key`, voteData.feedMessageTags[index].key);
        formData.append(`feedMessageTags[${index}].value`, voteData.feedMessageTags[index].value);
    }

【讨论】：