.NET MVC SignalR无法调用SendImage方法无报错无响应问题排查

核心原因 #

• SignalR本身不支持直接将前端File类型对象作为方法参数传输，默认序列化规则无法处理二进制文件对象，导致请求触发后无法正确匹配到后端Hub对应的SendImage方法，也不会抛出明确报错。
• 后端SendImage方法的第二个参数使用HttpPostedFileBase类型错误，该类型仅适用于ASP.NET MVC常规表单文件上传场景，无法适配SignalR Hub的参数绑定规则。

修复方案 #

前端修改 #

将选中的文件读取为Base64字符串后再调用SignalR方法：

$("#file-input").change(e => {
    let f = e.target.files[0];
    console.log(f);
    // 新增FileReader读取文件为Base64格式
    const reader = new FileReader();
    reader.onload = function (e) {
        const base64File = e.target.result;
        proxy.server.sendImage(name, base64File, photo);
    }
    reader.readAsDataURL(f);
});
$("form").submit(e => {
    e.preventDefault();
    let text = $("#text").val().trim();
    if (text) {
        proxy.server.sendText(name, text, photo);
    }
    $("#text").val("").focus();
});

后端修改 #

调整SendImage方法的参数类型，新增Base64转存文件的逻辑：

// 参数类型从HttpPostedFileBase改为string接收Base64内容
public void SendImage(string name, string base64File, string photo)
{
    // 移除Base64前缀标识 如data:image/png;base64,
    var base64Content = base64File.Split(',')[1];
    byte[] fileBytes = Convert.FromBase64String(base64Content);
    // 调整SavePhoto逻辑，接收字节数组完成文件保存，返回存储后的访问路径
    var photoUrl = SavePhotoFromBytes(fileBytes);
    
    var m = new ForumMessage
    {
        Id = NextForumId(),
        Message = null,
        PhotoURL = photoUrl,
        MemberEmail = name,
        MemberPhoto = photo
    };
    db.ForumMessages.Add(m);
    db.SaveChanges();

    // 向前端返回存储后的图片路径，不要直接传Base64或原始文件对象
    Clients.Caller.ReceiveImage(name, photoUrl, photo, "sender");
    Clients.Others.ReceiveImage(name, photoUrl, photo, "caller");
}

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