Blazor WASM文件上传时Controller的MultipartFormDataContent为空问题

核心问题分析 #

你的代码存在三个关键错误，导致控制器无法接收到文件：

1. 控制器参数类型错误 #

服务器端控制器不能直接接收MultipartFormDataContent，这是客户端用于构建请求的类型，服务器端应该用ASP.NET Core提供的IFormFile或IEnumerable<IFormFile>来绑定上传的文件。

2. 客户端文件参数名带多余引号 #

你在添加文件到MultipartFormDataContent时，name参数用了"\"files\""，这会导致服务器端无法识别参数名（实际参数名变成了带双引号的"files"，而不是files），从而无法绑定到IEnumerable<IFormFile>参数。

3. 客户端提前读取流导致数据耗尽 #

在发送请求前，你调用了await f.ReadAsStringAsync()读取了文件流的内容，这会将流的位置移动到末尾，当后续Http.PostAsync发送请求时，流已经没有数据可以读取，导致服务器端接收到空文件。

修复后的代码 #

1. 修正控制器代码 #

将参数改为IEnumerable<IFormFile>，参数名与客户端的name保持一致（这里用files）：

[HttpPost]
public async Task<IActionResult> PostFile([FromForm] IEnumerable<IFormFile> files)
{
    foreach (var file in files)
    {
        // 读取文件内容示例，根据你的需求处理
        using var reader = new StreamReader(file.OpenReadStream());
        var content = await reader.ReadToEndAsync();
        // 后续逻辑...
    }

    return Ok();
}

2. 修正客户端Razor.cs代码 #

• 移除多余的引号，将name: "\"files\""改为name: "files"
• 删除发送前读取流的测试代码，避免耗尽流数据
• 修正maxFileSize为页面标注的5MB限制

修正后的OnInputFileChange方法：

private async Task OnInputFileChange(InputFileChangeEventArgs e)
{
    shouldRender = false;
    long maxFileSize = 1024 * 1024 * 5; // 对应5MB限制
    var upload = false;

    using var content = new MultipartFormDataContent();

    foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
    {
        if (uploadResults.SingleOrDefault(f => f.FileName == file.Name) is null)
        {
            try
            {
                uploadFiles.Add(file.Name);

                var fileContent = new StreamContent(file.OpenReadStream(maxFileSize));
                fileContent.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);

                // 修正name参数，去掉多余引号
                content.Add(
                    content: fileContent,
                    name: "files",
                    fileName: file.Name);

                upload = true;
            }
            catch (Exception ex)
            {
                uploadResults.Add(new()
                {
                    FileName = file.Name,
                    ErrorCode = 6,
                    Uploaded = false
                });
            }
        }
    }

    if (upload)
    {
        var response = await Http.PostAsync("api/UploadDocuments", content);
        
        // 可选：添加响应处理逻辑
        if (response.IsSuccessStatusCode)
        {
            // 上传成功后的处理
        }
    }
}

额外注意事项 #

• 确保控制器路由api/UploadDocuments与客户端请求地址完全一致，注意大小写和路由前缀
• 如果需要处理更大的文件，可在ASP.NET Core的Program.cs中调整请求大小限制：

  builder.Services.Configure<FormOptions>(options => 
  {
      options.MultipartBodyLengthLimit = 10 * 1024 * 1024; // 10MB示例
  });
  

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