在 ASP.NET Core 中上传多个带参数的文件

Question

我的视图模型：

public class FileInfo
{
    [Required]
    [StringLength(50, ErrorMessage = "TitleErrorMessage", MinimumLength = 2)]
    public string Title { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "DesErrorMessage", MinimumLength = 3)]
    public string Description { get; set; }

    [Required]
    [DataType(DataType.Upload)]
    public IFormFile File { get; set; }
}

以下是_UploadForm部分视图文件：

@model SessionStateTest.Models.FileInfo

<div class="form-group">
    <label>Title</label>
    <input class="form-control" asp-for="Title" />
</div>
<div class="form-group">
    <label>Description</label>
    <input class="form-control" asp-for="Description" />
</div>
<div class="form-group">
    <label></label>
    <input type="file" asp-for="File" />
</div>

在另一个视图中使用此代码：

<form asp-action="AddUploadForm" asp-controller="Home" method="Post">
    <input type="submit" value="Add another file" class="btn btn-sm btn-primary" />
</form>
<form asp-action="Upload" asp-controller="Home" method="Post" enctype="multipart/form-data">

    @foreach (var item in Model.Upload)
    {
        @(await Html.PartialAsync("_UploadForm", item))
    }

    <div class="col-xs-12">
        <input type="submit" value="Upload" class="btn btn-sm btn-info" />
    </div>
</form>

基本上AddUploadForm 操作将FileInfo 类型的新视图模型添加到Model.Upload，这是我的主视图模型。 问题是下面Upload 操作中的List<FileInfo> vm 列表完全为空：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Upload(List<FileInfo> vm)
{
    .... some other logic 
    return View();
}

我不想使用multiple 属性，因为我想强制用户为每个文件提供标题和描述。

感谢任何帮助！

Answer 1

您使用_UploadForm 的方法会生成以下html（我们只关注input，因为这是最重要的部分）

<input class="form-control" name="Title" />
<input class="form-control" name="Description" />
<input type="file" name="File" />

...
<input class="form-control" name="Title" />
<input class="form-control" name="Description" />
<input type="file" name="File" />

... and so on

所以name 属性只包含FileInfo 模型的属性名称而没有索引，这仅适用于控制器需要单个模型的情况

public IActionResult Upload(FileInfo vm)

为了让您的 html 与您当前的控制器一起使用模型列表

public IActionResult Upload(List<FileInfo> vm)

应该是这样的

<!-- version 1 -->
<input class="form-control" name="[0].Title" />
<input class="form-control" name="[0].Description" />
<input type="file" name="[0].File" />

...
<input class="form-control" name="[1].Title" />
<input class="form-control" name="[1].Description" />
<input type="file" name="[1].File" />

... and so on

或者

<!-- version 2 -->
<!-- the name before index must match parameter name in controller -->
<input class="form-control" name="vm[0].Title" />
<input class="form-control" name="vm[0].Description" />
<input type="file" name="vm[0].File" />

...
<input class="form-control" name="[1].Title" />
<input class="form-control" name="[1].Description" />
<input type="file" name="vm[1].File" />

... and so on

这可以通过使用标签助手和局部视图以稍微不同的方式来完成。您需要做的就是将部分视图的模型转为列出并更新asp-for 表达式。

_UploadForm.cshtml

@model List<SessionStateTest.Models.FileInfo>

@for (int i = 0; i < Model.Count; i++)
{
    <div class="form-group">
        <label>Title</label>
        <input class="form-control" asp-for="@Model[i].Title" />
    </div>
    <div class="form-group">
        <label>Description</label>
        <input class="form-control" asp-for="@Model[i].Description" />
    </div>
    <div class="form-group">
        <label></label>
        <input type="file" asp-for="@Model[i].File" />
    </div>
}

查看

<form asp-action="Upload" asp-controller="Home" method="Post" enctype="multipart/form-data">

    @await Html.PartialAsync("_UploadForm", Model.Upload)

    <div class="col-xs-12">
        <input type="submit" value="Upload" class="btn btn-sm btn-info" />
    </div>
</form>

它将像 第 1 版一样生成 html。