上传超30MB图片报错Request Entity Too Large的解决方法

问题描述 #

我开发了一个应用，仅在用户点击提交按钮时将图片保存至网络驱动器，但当尝试上传超过30MB的图片时，上传失败并收到错误提示："Request Entity Too Large"。

我的代码 #

图片选择处理代码

private async Task HandleImageSelection(InputFileChangeEventArgs e)
{
    selectedImages.Clear();

    if (string.IsNullOrEmpty(selectedFolder))
    {
        Snackbar.Add("请先选择文件夹。", Severity.Warning);
        return;
    }

    // 设置限制条件
    const int maxImagesAllowed = 20; // 最大图片数量
    const long maxTotalSize = 100 * 1024 * 1024; // 总大小限制100MB
    const long maxAllowedSize = 100 * 1024 * 1024; // 单文件大小限制100MB（因总大小已限制，此值可忽略）

    var selectedFiles = e.GetMultipleFiles(maxImagesAllowed); // 限制最多选择20张图片

    long totalSize = selectedFiles.Sum(file => file.Size);

    // 检查总大小是否超限
    if (totalSize > maxTotalSize)
    {
        Snackbar.Add($"所选图片总大小超过100MB限制。当前大小：{Math.Round((double)totalSize / (1024 * 1024), 2)} MB。", Severity.Error);
        return;
    }

    foreach (var file in selectedFiles)
    {
        // 检查是否为图片文件
        if (!file.ContentType.StartsWith("image/"))
        {
            Snackbar.Add($"文件'{file.Name}'不是有效图片，请仅选择图片文件。", Severity.Warning);
            continue;
        }

        try
        {
            using var stream = file.OpenReadStream(maxAllowedSize);
            var buffer = new byte[file.Size];
            await stream.ReadAsync(buffer, 0, (int)file.Size);

            var base64Data = Convert.ToBase64String(buffer);

            // 添加到已选图片列表
            selectedImages.Add(new ImagePreview
            {
                PreviewUrl = $"data:{file.ContentType};base64,{base64Data}",
                File = file,
                Base64Data = base64Data
            });
        }
        catch (Exception ex)
        {
            Snackbar.Add($"加载文件'{file.Name}'出错：{ex.Message}", Severity.Error);
        }
    }

    SelectedFiles = selectedFiles
        .Where(file => file.ContentType.StartsWith("image/"))
        .ToList();

    StatusMessage = $"已选择{SelectedFiles.Count}个有效图片文件。总大小：{Math.Round((double)totalSize / (1024 * 1024), 2)} MB。";
}

图片上传代码

private async Task UploadFiles(string combinedFolderPath)
{
    if (string.IsNullOrWhiteSpace(combinedFolderPath))
    {
        Snackbar.Add("请选择文件夹！", Severity.Warning);
        return;
    }

    if (SelectedFiles == null || !SelectedFiles.Any())
    {
        Snackbar.Add("未选择任何文件！", Severity.Warning);
        return;
    }

    // 检查文件大小限制
    foreach (var file in SelectedFiles)
    {
        if (file.Size > MaxFileSize)
        {
            Snackbar.Add($"文件{file.Name}超过100MB大小限制。", Severity.Warning);
            return;
        }
    }

    try
    {
        using var content = new MultipartFormDataContent();
        content.Add(new StringContent(combinedFolderPath), "folderPath");

        foreach (var file in SelectedFiles)
        {
            var streamContent = new StreamContent(file.OpenReadStream(MaxFileSize));
            content.Add(streamContent, "files", file.Name);
        }

        var response = await HttpClient.PostAsync(ApiConstants.UploadImage, content);

        if (response.IsSuccessStatusCode)
        {
            var responseContent = await response.Content.ReadAsStringAsync();
            var filePaths = JsonSerializer.Deserialize<List<string>>(responseContent);

            for (int i = 0; i < selectedImages.Count; i++)
            {
                selectedImages[i].FilePath = filePaths[i];
            }

            // Snackbar.Add("图片上传成功！", Severity.Success);
        }
        else
        {
            Snackbar.Add($"错误：{response.ReasonPhrase}", Severity.Error);
        }
    }
    catch (Exception ex)
    {
        Snackbar.Add($"上传失败：{ex.Message}", Severity.Error);
    }
}

表单提交代码

private async Task SubmitForm()
{
    if (string.IsNullOrWhiteSpace(maagimage.ProjectKent))
    {
        Snackbar.Add("请输入有效的项目名称。", Severity.Error);
        return;
    }

    if (string.IsNullOrWhiteSpace(selectedFolder))
    {
        Snackbar.Add("请选择文件夹位置。", Severity.Warning);
        return;
    }

    // 先上传图片
    // await UploadFiles();

    // 在所选位置创建项目文件夹
    await CreateProjectFolder();

    var userData = await localStorage.GetItemAsync<UserPagesAndRouter>("UserData");

    currentUsername = userData?.UserName;

    if (string.IsNullOrEmpty(maagimage.ProjectKent) || string.IsNullOrEmpty(maagimage.Department))
    {
        Snackbar.Add("请填写所有必填字段。", Severity.Error);
        return;
    }

    if (selectedImages.Count == 0)
    {
        Snackbar.Add("未选择要提交的图片。", Severity.Warning);
        return;
    }

    // 准备要发送到API的表单数据
    var formData = new MaagAmericansImage
    {
        Location = maagimage.Location,
        Department = maagimage.Department,
        Username = currentUsername,  // 设置当前用户，按需传递
        Date = DateTime.Now,        // 设置当前日期
        ProjectKent = maagimage.ProjectKent,
        Images = selectedImages.Select(img => new Imagedata
        {
            ImageFilePath = img.FilePath  // 使用已保存的文件路径
        }).ToList()
    };

    try
    {
        var response = await HttpClient.PostAsJsonAsync(ApiConstants.AddimageDetails, formData);

        if (response.IsSuccessStatusCode)
        {
            // Snackbar.Add("照片上传成功！", Severity.Success);
            // 显示成功弹窗替代Snackbar
            var dialog = DialogService.Show<SuccessDialog>("", new DialogParameters { { "Message", "照片上传成功！" } });
            var result = await dialog.Result;
            ClearFormData();

            // 弹窗关闭后的额外逻辑（如有需要）
        }
        else
        {
            var errorMessage = await response.Content.ReadAsStringAsync();

            if (response.StatusCode == System.Net.HttpStatusCode.BadRequest && errorMessage.Contains("The ImageFilePath field is required."))
            {
                //Snackbar.Add("项目文件夹与所选文件夹不匹配。", Severity.Error);
            }
            else
            {
                Snackbar.Add($"提交失败：{errorMessage}", Severity.Error);
            }
        }
    }
    catch (Exception ex)
    {
        Snackbar.Add($"错误：{ex.Message}", Severity.Error);
    }
}

解决方案 #

"Request Entity Too Large"错误本质是后端服务器或中间件拒绝了超出其配置上限的请求，需从以下几个层面调整：

1. 调整ASP.NET Core后端配置 #

在Program.cs中添加请求大小限制配置：

builder.Services.Configure<FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 100 * 1024 * 1024; // 与前端限制一致，设为100MB
    options.ValueLengthLimit = int.MaxValue;
});

同时，在处理上传的API控制器Action上添加特性：

[HttpPost]
[Route("upload-image")]
[RequestSizeLimit(100 * 1024 * 1024)] // 明确设置该接口的最大请求大小
public async Task<IActionResult> UploadImage(IFormFile[] files, string folderPath)
{
    // 你的上传逻辑实现
}

2. 确认前端Blazor的文件限制 #

确保组件中定义的MaxFileSize值正确：

private long MaxFileSize = 100 * 1024 * 1024; // 100MB

若使用Blazor Server，在_Host.cshtml中添加全局文件上传配置：

<script>
    Blazor.start({
        fileOptions: {
            maxFileSize: 100 * 1024 * 1024 // 100MB
        }
    });
</script>

3. 调整部署服务器的配置 #

如果应用部署在IIS或Nginx等服务器上，还需修改对应配置：

• IIS：在web.config中添加

<system.webServer>
    <security>
        <requestFiltering>
            <requestLimits maxAllowedContentLength="104857600" /> <!-- 100MB -->
        </requestFiltering>
    </security>
</system.webServer>

• Nginx：在站点配置中添加

client_max_body_size 100M;

4. 代码优化建议 #

• 取消SubmitForm中UploadFiles的注释，确保上传逻辑在提交表单前执行，避免ImageFilePath为空的问题。
• 可以考虑添加大文件分块上传逻辑，进一步提升大文件上传的稳定性。

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