如何让C# WCF服务接收JavaScript传入的Int8Array参数？

我之前也碰到过类似的情况，WCF默认的序列化机制没办法直接识别JavaScript的Int8Array——毕竟这是JS特有的类型，和C#的byte[]虽然底层都是字节，但序列化规则完全不匹配。下面给你两种靠谱的解决方案，你可以根据自己的场景挑选：

方案一：转成Base64字符串传递（最省心） #

这个方案兼容性最好，不需要改太多WCF的配置，核心思路是把图片数据转成Base64字符串传给服务端，再由C#转成字节数组存库。

1. 调整WCF服务契约 #

先给服务加一个接收Base64字符串的方法：

[ServiceContract]
public interface IImageService
{
    [OperationContract]
    bool SaveImageFromBase64(string base64ImageData);
}

然后实现这个方法，把Base64转成byte[]再存数据库：

public class ImageService : IImageService
{
    public bool SaveImageFromBase64(string base64ImageData)
    {
        try
        {
            // 将Base64字符串转成字节数组
            byte[] imageBytes = Convert.FromBase64String(base64ImageData);
            
            // 这里写你的数据库存储逻辑，记得用参数化命令防注入
            using (var conn = new SqlConnection("你的数据库连接字符串"))
            {
                conn.Open();
                var cmd = new SqlCommand("INSERT INTO Images (ImageData) VALUES (@ImageBytes)", conn);
                cmd.Parameters.AddWithValue("@ImageBytes", imageBytes);
                cmd.ExecuteNonQuery();
            }
            return true;
        }
        catch (Exception ex)
        {
            // 这里可以加日志记录异常
            return false;
        }
    }
}

2. 修改JavaScript代码 #

直接用FileReader.readAsDataURL()把文件读成Base64，去掉前缀后传给WCF：

var reader = new FileReader();
reader.onload = function (e) {
    // 页面展示图片
    dojo.byId('img1').src = reader.result;
    
    // 提取纯Base64内容（去掉"data:image/xxx;base64,"前缀）
    var base64Data = reader.result.split(',')[1];
    
    // 调用WCF服务（假设你已经生成了WCF代理类ImageService）
    ImageService.SaveImageFromBase64(base64Data, 
        function (result) {
            result ? console.log('图片保存成功！') : console.log('保存失败');
        },
        function (error) {
            console.error('调用服务出错：', error);
        }
    );
};

// 读取选中的图片文件为DataURL
reader.readAsDataURL(document.getElementById('你的文件输入框ID').files[0]);

方案二：直接传递二进制数据（性能更优） #

如果图片比较大，不想用Base64（会增加30%左右的体积），可以直接传二进制流，但需要调整WCF的绑定配置。

1. 配置WCF的webHttpBinding #

在web.config里修改服务绑定，支持大消息和原始二进制传输：

<system.serviceModel>
    <bindings>
        <webHttpBinding>
            <!-- 配置大消息支持，根据图片大小调整数值 -->
            <binding name="LargeBinaryBinding" 
                     maxReceivedMessageSize="2147483647" 
                     maxBufferSize="2147483647">
                <readerQuotas maxArrayLength="2147483647" 
                              maxStringContentLength="2147483647"/>
            </binding>
        </webHttpBinding>
    </bindings>
    <services>
        <service name="你的命名空间.ImageService">
            <endpoint address="" 
                      binding="webHttpBinding" 
                      bindingConfiguration="LargeBinaryBinding"
                      contract="你的命名空间.IImageService"
                      behaviorConfiguration="WebBehavior"/>
        </service>
    </services>
    <behaviors>
        <endpointBehaviors>
            <behavior name="WebBehavior">
                <webHttp/>
            </behavior>
        </endpointBehaviors>
    </behaviors>
</system.serviceModel>

2. 修改WCF服务方法 #

改成接收Stream类型的参数，直接读取二进制流：

[ServiceContract]
public interface IImageService
{
    [OperationContract]
    [WebInvoke(Method = "POST", UriTemplate = "SaveImage", RequestFormat = WebMessageFormat.Raw)]
    bool SaveImage(Stream imageStream);
}

public class ImageService : IImageService
{
    public bool SaveImage(Stream imageStream)
    {
        try
        {
            // 将流转成字节数组
            using (var memoryStream = new MemoryStream())
            {
                imageStream.CopyTo(memoryStream);
                byte[] imageBytes = memoryStream.ToArray();
                
                // 存储到数据库的逻辑
                using (var conn = new SqlConnection("你的连接字符串"))
                {
                    conn.Open();
                    var cmd = new SqlCommand("INSERT INTO Images (ImageData) VALUES (@ImageBytes)", conn);
                    cmd.Parameters.AddWithValue("@ImageBytes", imageBytes);
                    cmd.ExecuteNonQuery();
                }
            }
            return true;
        }
        catch (Exception ex)
        {
            // 记录异常日志
            return false;
        }
    }
}

3. JavaScript端用XMLHttpRequest传二进制 #

用FileReader.readAsArrayBuffer()读取文件，然后直接发二进制请求：

var reader = new FileReader();
reader.onload = function (e) {
    // 页面展示图片
    dojo.byId('img1').src = URL.createObjectURL(fileInput.files[0]);
    
    var arrayBuffer = e.target.result;
    var xhr = new XMLHttpRequest();
    
    xhr.open('POST', '/ImageService.svc/SaveImage', true);
    // 设置请求头为二进制流
    xhr.setRequestHeader('Content-Type', 'application/octet-stream');
    
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log('图片保存成功！');
        } else {
            console.log('保存失败，状态码：' + xhr.status);
        }
    };
    
    xhr.onerror = function () {
        console.error('请求出错');
    };
    
    // 发送ArrayBuffer
    xhr.send(arrayBuffer);
};

// 读取文件为ArrayBuffer
reader.readAsArrayBuffer(document.getElementById('你的文件输入框ID').files[0]);

常见问题排查 #

• 跨域问题：如果前端和WCF不在同一个域名，需要给WCF配置CORS支持，可以通过添加自定义消息处理程序实现。
• 消息大小限制：如果图片过大被拒绝，一定要检查WCF配置里的maxReceivedMessageSize、maxBufferSize和readerQuotas参数，确保数值足够大。
• 序列化错误：如果用方案一，要确保Base64字符串没有多余的空格或换行，否则Convert.FromBase64String会报错。

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