使用ASP.NET Web API下载二进制数据时出现AngularJS GET byte []错误

Question

有关此问题的其他背景信息，请参见使用AngularJS和ASP.NET Web API上传/下载字节数组 。

在处理用于上载/下载字节数组的TypeScript / AngularJS（v1.2.22）/ Web API解决方案时，我发现AngularJS无法正确响应客户端对字节数组数据的GET请求的情况。 为了证明我的服务器代码，我在Angular之外创建了一些单独的XMLHttpRequest代码，它们可以与Web API服务器代码一起正常工作。

1. AngularJS代码中可能仍然缺少某些内容，但是我搜寻了许多文档，文章和代码示例，但未发现任何明显与代码错误的内容。
2. 我已经验证了从服务器通过Fiddler发送的数据对于AngularJS和XMLHttpRequest代码是相同的。
3. Angular代码的第一个问题是它将数据解释为字符串，而不是字节数组，而XMLHttpRequest代码将该代码正确解释为字节数组。
4. 第二个问题是AngularJS代码破坏了所有大于127（即128-255）的值。 我在下面包括了一个屏幕截图。
5. 第三个问题是数据丢失。 AngularJS代码中的重构数据只有217个字节，而不是256个字节。

这是有效的XMLHttpRequest代码。 请注意，响应是UInt8Array构造函数的有效参数。

    var oReq = new XMLHttpRequest();
    oReq.open("GET", "/api/Values", true);
    // Worked on IE, Chrome, and Firefox with this line commented out, Firefox docs say it should be declared.
    oReq.overrideMimeType("charset=x-user-defined");
    oReq.responseType = "arraybuffer";
    oReq.onload = function () {
        var arrayBuffer = oReq.response, bArray = new Uint8Array(arrayBuffer), str = "";
        if (arrayBuffer) {
            for (var i = 0; i < bArray.length; i++) {
                str += bArray[i] + ((i < bArray.length - 1) ? "," : "");
            }
            window.alert("XMLHttpRequest GET Output: " + str);
        }
    };

这是无法正常工作的AngularJS代码（即，返回具有正确值的byte []）。 请注意，响应必须从字符串转换为数组。

    $http({
        method: 'GET',
        url: 'api/values',
        headers: {'Content-Type': 'application/octet-stream; charset=x-user-defined'},
        // The issue was caused by using camel case B. MUST BE 'arraybuffer'
        // Changed code below to reflect correction.
        responseType: 'arraybuffer',
        transformResponse: []
    }).success(function (response, status) {
            if (status === 200) {// Issue 1: response is not byte[]. It is a string. Issue 2: String values > 127 are corrupted.
                var buffer = new ArrayBuffer(response.length), bArray = new Uint8Array(buffer), len = bArray.length, i, str = "";
                for (i = 0; i < len; i++) {// Cannot create an array from response data here, but I can using XMLHttpRequest.
                    str += bArray[i] = response[i].charCodeAt(0);// Have to read character value.
                    if (i < len - 1)
                        str += ",";
                }
                window.alert("Angular Output: " + str);
                var unsigned8Int = new Uint8Array(bArray);// Can create new array here after processing string values.
                var b64Encoded = btoa(String.fromCharCode.apply(null, unsigned8Int));
                callback(b64Encoded);
            }
        }).error((data, status) => {
            console.log('[ERROR] Status Code:' + status);
        });

我在上面的AngularJS代码中注释了这些问题。 我根据各种文章尝试了上述代码的多种变体，但没有一个奏效。 我尝试了默认的transformResponse，但发现有一篇文章说必须重置默认值。

服务器端代码如下：

    [AcceptVerbs("Get")]
    public HttpResponseMessage Get()
    {
        byte[] item = new byte[256];
        for (var i = 0; i < item.Length; i++)
        {
            item[i] = (byte)i;
        }
        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        result.Content = new ByteArrayContent(item);
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        return result;
    }

我在下面的每个测试用例中检查了Fiddler中的十六进制数据，它们是相同的（即000102 ... EFFF），并且Fiddler中的长度为256。在Angular代码中，数据长度仅为217对256，因此数据已损坏和丢失。

下面是上面两个不同的GET代码块的两个屏幕截图。

我重复了测试，并在服务器代码中插入了图像而不是256字节数组。 同样，Fiddler中的图像数据内容（见下文）和长度（27,998字节）相同。

Angular代码块内收到的图像必须从字符串转换为字节数组，并且大小要小得多（约20K）。

似乎有两种可能：1）我的AngularJS代码不好，或者2）Angular存在问题。

我将尝试在调试器中深入研究AngularJS代码，但是我不确定我能走多远。

我真的可以从一些Angular笑话中获得帮助。

谢谢...

更新Eric Eslinger刚刚指出了我的错误。 arrayBuffer必须是arraybuffer（没有骆驼）

Answer 1

具体拨打电话是

$http.get('http://example.com', {responseType: 'arraybuffer'})

然后您将获得适当的二进制响应。