ASP.NET Core (Razor Pages) 现有表单添加文件上传后数据无法正常序列化问题咨询

问题原因 #

出现该问题主要有两个核心原因：

• 表单未设置enctype="multipart/form-data"属性，浏览器无法正常提交二进制文件数据到后端服务
• 模型中的IFormFile类型属性无法被JSON序列化，直接序列化整个Book实体存储到Azure Table时会触发异常，同时原有模型代码还存在语法疏漏。

修复步骤 #

1. 修改表单属性
   给form标签新增enctype="multipart/form-data"配置，修改后表单代码如下：

<form method="post" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Book.Title" class=" control-label"></label>
        <input asp-for="Book.Title" class="form-control " />
        <span asp-validation-for="Book.Title" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Book.Author" class=" control-label"></label>
        <input asp-for="Book.Author" class="form-control " />
        <span asp-validation-for="Book.Author" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="Book.Publisher" class=" control-label"></label>
        <input asp-for="Book.Publisher" class="form-control " />
        <span asp-validation-for="Book.Publisher" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="Book.FileUploads" class=" control-label"></label>
        <input asp-for="Book.FileUploads" type="file" multiple class="form-control " />
        <span asp-validation-for="Book.FileUploads" class="text-danger"></span>
    </div>
    <input type="submit" class="btn btn-primary" />
</form>

2. 修正模型代码
   补全原有JsonProperty特性的闭合方括号，同时给FileUploads属性添加[JsonIgnore]特性，避免序列化时抛出异常，修改后模型代码如下：

public class Book
{
    [JsonProperty("PartitionKey")]
    public string PartitionKey { get; set; }

    [JsonProperty("RowKey")]
    public Guid Id { get; set; }

    [JsonProperty("Title")]
    public string Title { get; set; }

    [JsonProperty("Author")]
    public string Author { get; set; }

    [JsonProperty("Publisher")]
    public string Publisher { get; set; }

    [JsonProperty("FileUploads")]
    [JsonIgnore]
    public List<IFormFile> FileUploads { get; set; } = new List<IFormFile>();
}

3. 验证存储逻辑
   原有存储方法无需修改，书籍基础元数据会正常序列化存入Azure Storage Table，上传的文件会单独存入Blob Storage，两套逻辑互不干扰。

内容的提问来源于stack exchange，提问作者AWinter