前端向后端传输4MB Excel文件超时问题及解决方案咨询

嘿，你的问题我太熟悉了——小文件传得顺顺当当，一到大文件就卡壳，大概率是请求超时或者后端请求大小限制在搞鬼。你提到的延长连接时长和分片传输都是非常有效的解决思路，我来给你拆解具体怎么做：

一、先试试调整超时与请求大小限制（快速见效） #

看你的代码里用到了SignalR的invoke方法，那咱们先从SignalR和后端的配置入手：

1. 前端SignalR配置超时 #

默认情况下SignalR的超时时间可能不足以支撑大文件传输，你可以在初始化Hub连接时手动延长超时：

// 假设你的Hub连接初始化代码类似这样，添加超时配置
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/MT4ConfigHub")
    .configureLogging(signalR.LogLevel.Information)
    // 延长超时到30秒，可根据实际传输速度调整
    .setTimeout(30000)
    .withAutomaticReconnect()
    .build();

2. 后端C#调整请求限制 #

ASP.NET默认对请求大小和SignalR消息大小有约束，得手动放开：

ASP.NET Core 示例

在Program.cs里修改SignalR配置：

builder.Services.AddSignalR(options =>
{
    // 设置最大接收消息大小为10MB（按需调整）
    options.MaximumReceiveMessageSize = 10 * 1024 * 1024;
});

同时在Program.cs里添加请求大小限制：

builder.Services.Configure<Microsoft.AspNetCore.Http.Features.FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 10 * 1024 * 1024; // 10MB
});

传统ASP.NET 示例

在web.config里添加：

<system.web>
    <httpRuntime maxRequestLength="1048576" /> <!-- 10MB，单位KB -->
</system.web>
<system.webServer>
    <security>
        <requestFiltering>
            <requestLimits maxAllowedContentLength="1073741824" /> <!-- 10MB，单位字节 -->
        </requestFiltering>
    </security>
</system.webServer>

3. 优化前端文件编码方式 #

你现在用btoa(new TextDecoder('utf-8').decode(new Uint8Array(this.result)))处理二进制Excel文件，这其实不太合适——TextDecoder转utf-8可能丢失二进制数据，而且base64编码会让文件体积增大30%左右。建议直接传递二进制数据：

document.getElementById("selectedFile").addEventListener("change", function (event) {
    const file = event.target.files[0];
    filename = file.name;
    // 直接读取为ArrayBuffer，无需转base64
    const reader = new FileReader();
    reader.onload = function () {
        fileContent = this.result; // 这里是原始ArrayBuffer
    };
    reader.readAsArrayBuffer(file);
});

后端的RunReport方法参数改成接收byte[]即可，这样传输体积更小，还能避免编码错误。

二、分片传输（彻底解决大文件问题） #

如果调整超时后还是不稳定，或者未来要支持更大的文件，分片传输是更稳妥的方案——把大文件切成小块逐个上传，后端接收完所有分片后再拼接成完整文件。

前端分片上传示例 #

const chunkSize = 1024 * 1024; // 每片1MB，可调整
let fileChunks = [];
let currentChunk = 0;

document.getElementById("selectedFile").addEventListener("change", function (event) {
    const file = event.target.files[0];
    filename = file.name;
    // 切割文件为多个分片
    fileChunks = [];
    for (let i = 0; i < file.size; i += chunkSize) {
        const chunk = file.slice(i, i + chunkSize);
        fileChunks.push(chunk);
    }
});

// 修改runReportRequest为分片上传逻辑
function runReportRequest() {
    toggleRunButton();
    $("#textAreaRow").show();
    const token = getUserToken();
    
    // 先通知后端准备接收文件
    RunMT4ConfigHub.invoke("InitFileUpload", token, filename, fileChunks.length)
        .then(() => {
            // 递归发送分片
            const sendNextChunk = () => {
                if (currentChunk >= fileChunks.length) {
                    // 所有分片发送完成，通知后端合并
                    return RunMT4ConfigHub.invoke("CompleteFileUpload", token, filename);
                }
                
                const chunk = fileChunks[currentChunk];
                const reader = new FileReader();
                reader.onload = function () {
                    RunMT4ConfigHub.invoke("UploadFileChunk", token, filename, currentChunk, this.result)
                        .then(() => {
                            currentChunk++;
                            sendNextChunk();
                        })
                        .catch(err => {
                            console.error("分片上传失败", err);
                            showErrorMsg("文件上传失败，请重试");
                            toggleRunButton();
                        });
                };
                reader.readAsArrayBuffer(chunk);
            };
            sendNextChunk();
        })
        .catch(err => {
            console.error("上传初始化失败", err);
            showErrorMsg("文件上传初始化失败");
            toggleRunButton();
        });
}

后端分片接收与合并示例 #

// 生产环境建议用缓存/数据库替代静态字典，避免内存泄漏
private static Dictionary<string, List<byte[]>> _tempFileChunks = new Dictionary<string, List<byte[]>>();

public async Task InitFileUpload(string token, string filename, int totalChunks)
{
    // 先验证token有效性
    var cacheKey = $"{token}_{filename}";
    if (!_tempFileChunks.ContainsKey(cacheKey))
    {
        // 初始化分片存储列表
        _tempFileChunks[cacheKey] = new List<byte[]>(totalChunks);
        for (int i = 0; i < totalChunks; i++)
        {
            _tempFileChunks[cacheKey].Add(null);
        }
    }
}

public async Task UploadFileChunk(string token, string filename, int chunkIndex, byte[] chunkData)
{
    var cacheKey = $"{token}_{filename}";
    if (_tempFileChunks.ContainsKey(cacheKey))
    {
        _tempFileChunks[cacheKey][chunkIndex] = chunkData;
    }
}

public async Task CompleteFileUpload(string token, string filename)
{
    var cacheKey = $"{token}_{filename}";
    if (_tempFileChunks.TryGetValue(cacheKey, out var chunks))
    {
        // 检查所有分片是否上传完成
        if (chunks.All(c => c != null))
        {
            // 合并分片为完整文件
            using var ms = new MemoryStream();
            foreach (var chunk in chunks)
            {
                ms.Write(chunk, 0, chunk.Length);
            }
            var fullFileBytes = ms.ToArray();
            
            // 调用你的业务逻辑处理Excel文件
            await ProcessExcelFile(fullFileBytes, filename);
            
            // 清理临时存储
            _tempFileChunks.Remove(cacheKey);
        }
        else
        {
            throw new Exception("部分分片未上传完成，请重试");
        }
    }
    else
    {
        throw new Exception("未找到文件上传初始化记录");
    }
}

总结 #

• 针对4MB的文件，先尝试调整超时+优化文件编码，基本就能解决问题；
• 如果未来要支持更大的文件，或者调整超时后仍不稳定，分片传输是更可靠的方案；
• 另外，SignalR虽然支持大消息，但HTTP本身对于超大文件的传输，不如专用的FormData分片上传稳定，如果场景允许，也可以考虑用普通AJAX结合FormData来实现大文件上传。

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