javascript - 在 formdata 中传递数组对象

Question

我在数组中有一个数组每个对象都有文件对象例如[{file：fileObject，Description：string}，{file：fileObject，Description：string}]我如何在formdata中传递这个数组以及控制器网络核心从表单数据

标签： javascriptasp.net-core.net-core

Answer 1

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

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

2.您的模型有一个IFormFile并且您的操作接收一个列表模型，如果您只传递 IFormFile 您需要删除FromForm属性并确保没有。[ApiController]这是一个已知的 github 问题，这已被移至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：