C#向TypeScript前端传输byte array时遭遇编码异常问题咨询

我之前也踩过这个坑！数据库里的varbinary(0x00000001)在C#里拿到的是[0,0,0,1]，但到前端就变样，核心原因是默认的JSON序列化不支持原生byte数组，会自动把它转成Base64字符串，导致前端拿到的不是原始字节。咱们分几种场景来解决：

方法1：Base64转译（最通用） #

这是JSON生态下的标准解决方案，后端把byte数组转成Base64字符串，前端再解码回Uint8Array。

后端C#代码 #

[HttpGet("fetch-binary-data")]
public IActionResult GetBinaryData()
{
    // 从数据库读取的varbinary数据
    byte[] dbBytes = new byte[] { 0, 0, 0, 1 };
    // 转成Base64字符串返回
    string base64Encoded = Convert.ToBase64String(dbBytes);
    return Ok(base64Encoded);
}

前端TypeScript代码 #

async function getBinaryData() {
    const res = await fetch("/api/fetch-binary-data");
    const base64Str = await res.text();
    // 解码Base64为二进制字符串
    const binaryStr = atob(base64Str);
    // 转成Uint8Array
    const uint8Array = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
        uint8Array[i] = binaryStr.charCodeAt(i);
    }
    console.log(uint8Array); // 输出：Uint8Array(4) [0, 0, 0, 1]
}

方法2：直接返回原始二进制数据（适合大文件/高效传输） #

如果不想做Base64转译，后端可以直接返回二进制流，前端获取ArrayBuffer后转成Uint8Array。

后端C#代码 #

[HttpGet("raw-binary-data")]
public IActionResult GetRawBinaryData()
{
    byte[] dbBytes = new byte[] { 0, 0, 0, 1 };
    // 返回二进制文件流，指定MIME类型为application/octet-stream
    return File(dbBytes, "application/octet-stream");
}

前端TypeScript代码 #

async function getRawBinaryData() {
    const res = await fetch("/api/raw-binary-data");
    // 直接获取ArrayBuffer
    const arrayBuffer = await res.arrayBuffer();
    const uint8Array = new Uint8Array(arrayBuffer);
    console.log(uint8Array); // 输出：Uint8Array(4) [0, 0, 0, 1]
}

如果用Axios的话，记得配置响应类型：

axios.get("/api/raw-binary-data", { responseType: "arraybuffer" })
    .then(res => {
        const uint8Array = new Uint8Array(res.data);
        console.log(uint8Array);
    });

方法3：用二进制序列化库（复杂场景） #

如果前后端有大量二进制数据交互，推荐用MessagePack这类二进制序列化库，它能直接保留byte数组的原始格式，比JSON+Base64更高效。

后端C#（用MessagePack-CSharp） #

// 先安装NuGet包：MessagePack
[HttpGet("msgpack-binary")]
public IActionResult GetMsgpackBinary()
{
    byte[] dbBytes = new byte[] { 0, 0, 0, 1 };
    // 用MessagePack序列化
    byte[] msgpackBytes = MessagePackSerializer.Serialize(dbBytes);
    return File(msgpackBytes, "application/x-msgpack");
}

前端TypeScript（用@msgpack/msgpack） #

// 先安装npm包：@msgpack/msgpack
import { decode } from "@msgpack/msgpack";

async function getMsgpackBinary() {
    const res = await fetch("/api/msgpack-binary");
    const arrayBuffer = await res.arrayBuffer();
    const decodedBytes = decode(new Uint8Array(arrayBuffer)) as Uint8Array;
    console.log(decodedBytes); // 输出：Uint8Array(4) [0, 0, 0, 1]
}

排查小技巧 #

• 打开浏览器开发者工具，查看响应内容：如果是JSON格式，那byte数组肯定被转成了Base64字符串；如果是二进制数据，响应类型会是application/octet-stream。
• 确认前端没有意外把二进制数据当成文本解析，这会导致字节被错误编码。

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