C# TCP/IP双向聊天应用图片发送显示乱码问题求助

你的问题核心是把图片的二进制数据当成文本字符串解码显示，二进制字节直接转UTF8字符串必然出现乱码。必须在消息中加入类型标识，让接收端区分文本和图片消息，再分别处理。

1. 定义基础消息协议 #

先约定简单的消息格式，避免混淆文本和图片：

• 首字节为消息类型：0x01=文本，0x02=图片
• 随后4字节为消息数据的长度（Int32，小端字节序）
• 最后是实际的消息数据（文本的UTF8字节数组 / 图片的二进制字节数组）

2. 修改发送逻辑 #

分别实现文本和图片的发送方法，确保按协议打包数据：

文本发送示例 #

private void SendText(string content)
{
    if (_networkStream == null || !_networkStream.CanWrite) return;

    byte[] typeBytes = new byte[] { 0x01 };
    byte[] contentBytes = Encoding.UTF8.GetBytes(content);
    byte[] lengthBytes = BitConverter.GetBytes(contentBytes.Length);

    // 拼接完整数据包
    List<byte> sendBuffer = new List<byte>();
    sendBuffer.AddRange(typeBytes);
    sendBuffer.AddRange(lengthBytes);
    sendBuffer.AddRange(contentBytes);

    try
    {
        _networkStream.Write(sendBuffer.ToArray(), 0, sendBuffer.Count);
    }
    catch (IOException ex)
    {
        // 处理发送异常，如连接断开
        Console.WriteLine($"发送失败: {ex.Message}");
    }
}

图片发送示例 #

private void SendImage(Image image)
{
    if (_networkStream == null || !_networkStream.CanWrite) return;

    byte[] typeBytes = new byte[] { 0x02 };
    byte[] imageBytes;

    // 将图片转为字节数组（避免直接操作文件流）
    using (MemoryStream ms = new MemoryStream())
    {
        image.Save(ms, ImageFormat.Png); // 推荐用PNG保留透明通道，也可换JPG
        imageBytes = ms.ToArray();
    }

    byte[] lengthBytes = BitConverter.GetBytes(imageBytes.Length);
    List<byte> sendBuffer = new List<byte>();
    sendBuffer.AddRange(typeBytes);
    sendBuffer.AddRange(lengthBytes);
    sendBuffer.AddRange(imageBytes);

    try
    {
        _networkStream.Write(sendBuffer.ToArray(), 0, sendBuffer.Count);
    }
    catch (IOException ex)
    {
        Console.WriteLine($"图片发送失败: {ex.Message}");
    }
}

3. 修改接收逻辑 #

在接收循环中，先解析消息类型，再按类型处理数据，注意必须在UI线程更新控件：

private void ReceiveLoop()
{
    while (_isConnected)
    {
        try
        {
            // 读取消息类型
            byte[] typeBuffer = new byte[1];
            int typeRead = _networkStream.Read(typeBuffer, 0, 1);
            if (typeRead == 0) break; // 连接已断开
            byte msgType = typeBuffer[0];

            // 读取数据长度
            byte[] lengthBuffer = new byte[4];
            int lengthRead = _networkStream.Read(lengthBuffer, 0, 4);
            if (lengthRead != 4) break;
            int dataLength = BitConverter.ToInt32(lengthBuffer, 0);

            // 完整读取数据（处理粘包）
            byte[] dataBuffer = new byte[dataLength];
            int totalRead = 0;
            while (totalRead < dataLength)
            {
                int read = _networkStream.Read(dataBuffer, totalRead, dataLength - totalRead);
                if (read == 0) break;
                totalRead += read;
            }

            // 根据类型更新UI（必须Invoke回到主线程）
            if (msgType == 0x01)
            {
                string text = Encoding.UTF8.GetString(dataBuffer);
                this.Invoke(new Action(() => AddTextMessage(text, isSelf: false)));
            }
            else if (msgType == 0x02)
            {
                // 复制图片流，避免原流释放后图片失效
                using (MemoryStream ms = new MemoryStream(dataBuffer))
                {
                    Image receivedImage = new Bitmap(Image.FromStream(ms));
                    this.Invoke(new Action(() => AddImageMessage(receivedImage, isSelf: false)));
                }
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"接收异常: {ex.Message}");
            break;
        }
    }
}

4. UI更新方法 #

分别实现文本和图片的UI添加逻辑，适配FlowLayoutPanel：

// 添加文本消息到FlowLayoutPanel
private void AddTextMessage(string text, bool isSelf)
{
    Label msgLabel = new Label
    {
        Text = text,
        AutoSize = true,
        Padding = new Padding(8, 6, 8, 6),
        BackColor = isSelf ? Color.LightBlue : Color.LightGray,
        Margin = new Padding(5, 2, 5, 2),
        Font = new Font("微软雅黑", 9f)
    };
    flowLayoutPanel1.Controls.Add(msgLabel);
    flowLayoutPanel1.ScrollControlIntoView(msgLabel);
}

// 添加图片消息到FlowLayoutPanel
private void AddImageMessage(Image image, bool isSelf)
{
    PictureBox imgBox = new PictureBox
    {
        Image = image,
        SizeMode = PictureBoxSizeMode.Zoom,
        Width = 200, // 限制宽度避免界面溢出
        Margin = new Padding(5, 2, 5, 2)
    };
    flowLayoutPanel1.Controls.Add(imgBox);
    flowLayoutPanel1.ScrollControlIntoView(imgBox);
}

关键注意事项 #

• 粘包处理：必须按长度前缀完整读取数据，避免一次接收多个消息导致解析错误
• UI线程安全：网络操作在后台线程，更新UI必须用Invoke/BeginInvoke
• 图片资源处理：接收图片时要复制为新Bitmap，避免原MemoryStream释放后图片失效
• 异常处理：发送/接收过程中要捕获IO异常，及时处理连接断开的情况

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