在 formdata 中传递数组对象答案

【问题标题】：Pass array object inside formdata在 formdata 中传递数组对象
【发布时间】：2021-05-30 01:14:17
【问题描述】：

我在数组中有一个数组，每个对象都有文件对象例如 [ { 文件：文件对象，描述：字符串 }, { 文件：文件对象，说明：字符串 } ] 我如何在表单数据中传递这个数组以及控制器网络核心从表单数据中捕获数据

【问题讨论】：

你能分享你的c#代码吗，
如何将数据传递给控制器？通过 ajax 或表单提交？

【解决方案1】：

如果你通过ajax发布数据，你首先需要知道以下两件事：

1.对于复杂类型的每个属性，模型绑定会在源中查找名称模式prefix.property_name。如果没有找到，它只查找 property_name 而没有 prefix。对于您在后端收到的 model 是一个列表，您需要给出类似的名称：[index].FormFile 或 model[index].FormFile。

2.你的模型有一个IFormFile，而你的动作接收一个列表模型，如果你只传递你需要删除FromForm属性的IFormFile并且确保没有[ApiController]。这是一个known github issue，已移至Next sprint planning 里程碑。

这是一个完整的工作演示：

型号：

public class FileModels
{
    public string Description { get; set; }

    public IFormFile FormFile { get; set; }
}

查看：

<input type="file" multiple onchange="saveDocuments(this.files)"/>
<div class="form-group">
    <input type="button" value="Submit" id="submit" class="btn btn-primary" />
</div>

@section Scripts
{
    <script>
        function saveDocuments(documentList) {
            if (documentList.length > 0) {
                var form = new FormData();
                for (var i = 0; i < documentList.length; i++) {                    
                    var file = documentList[i];                    
                    form.append('model['+i+'].FormFile', file);
                }
                savePhysicalFile(form);
            }
        }    
        function savePhysicalFile(formData) {
            if (formData != null) {
                $.ajax({
                    url: "/Home/Save",
                    type: 'POST',
                    dataType: "json",
                    contentType: "multipart/form-data",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        console.log("Success", result);
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            }
        }
    </script>
}

控制器：

[HttpPost]
public void Save(List<FileModels> model)
{
    //...
}

结果：

如果您通过表单提交发布数据，这是一个完整的工作演示：

@model FileModels
<form asp-action="Save" method="post" enctype="multipart/form-data">
    @for (int i = 0; i < 3; i++)
    {
        <div>
            <input type="text" asp-for="Description" name="[@i].Description" />
        </div>
        <div>
            <input type="file" asp-for="FormFile" name="[@i].FormFile" />
        </div>
       
    }
    <div class="form-group">
        <input type="submit" value="Submit" id="submit" class="btn btn-primary" />
    </div>
</form>

控制器：

[HttpPost]
public void Save(List<FileModels> model)
{
    //...
}

结果2：

【讨论】：