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

Question

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

型号：

    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();
            }
        }
    }

Answer 1

使用表单标签内的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>

上传文件后，输出为

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

ASP.NET Core (Razor Pages) - Added file upload to existing form

.net

razor

azure-table-storage

asp.net-core