ASP.NET Core (Razor Pages) - 添加文件上传到现有表单

问题描述

我们最初有一个带有 Razor 页面的表单，它只接收标准输入并将它们保存到 Azure 存储表中。当我们添加文件上传选项时，表单数据无法正确序列化。我已经包含了在将文件上传选项添加到表单之前正常工作的模型、表单和存储库代码。

型号：

    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")
    public List<IFormFile> FileUploads { get; set; } = new List<IFormFile>();
}

<form method="post" >
    <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>

保存方法：

  public async Task AddAsync(Book entity)
    {
        string tableName = "TestingTable";
        string connectionString = "";
        HttpClient http = TableClient(); //Base Address and DefaultHeaders loaded 
        HttpRequestMessage req = new HttpRequestMessage(HttpMethod.Post,$"/{tableName}?{connectionString}");
        req.Content = new StringContent(JsonConvert.SerializeObject(entity),Encoding.UTF8,"application/json");

        var res = await http.SendAsync(req);

        res.EnsureSuccessstatusCode();

        if (entity.FileUploads.Any())
        {
            string container = "uploads";
            foreach (var item in entity.FileUploads)
            {
                HttpRequestMessage blobRequest = new HttpRequestMessage(HttpMethod.Put,$"/{container}/{entity.Id}/{item.FileName}?{connectionString}");
                blobRequest.Content = new StreamContent(item.OpenReadStream());
                blobRequest.Content.Headers.Add("x-ms-blob-type","BlockBlob");
                var blobResponse = await http.SendAsync(blobRequest);
                blobResponse.EnsureSuccessstatusCode();
            }
        }
    }

解决方法

在表单标签中使用 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>

上传文件后，输出为