使用AngularJS和ASP.NET Web API上载/下载字节数组

Question

我花了几天时间研究和研究上传/下载byte []的解决方案.我很接近,但有一个问题似乎出现在我的AngularJS代码块中.

SO上有一个类似的问题,但它没有回应.请参阅/sf/ask/1669476581/

以下是在我陈述问题之前设置上下文的一些背景信息.

1. 我正在尝试创建一个通用的客户端/服务器接口来上传和下载byte [],它们被用作专有服务器数据库的一部分.
2. 我在客户端上使用TypeScript,AngularJS,JavaScript和Bootstrap CSS来创建单页面应用程序(SPA).
3. 我在服务器上使用ASP.NET Web API/C#.

正在开发SPA以替换Silverlight中开发的现有产品,因此它受现有系统要求的限制.SPA还需要针对广泛的设备(移动设备到桌面设备)和主要操作系统.

在几个在线资源(下面列出)的帮助下,我已经完成了大部分代码.我在下面的Byte Rot链接中使用异步多媒体格式化程序来实现byte [].

http://byterot.blogspot.com/2012/04/aspnet-web-api-series-part-5.html

从ASP.NET Web API中的控制器返回二进制文件

1. 我在客户端使用转换为Uint8Array的jpeg作为我的测试用例.
2. 实际的系统字节数组将包含压缩成预定义数据包的混合内容.但是,我需要能够处理任何有效的字节数组,因此图像是一个有效的测试用例.
3. 使用下面显示的客户端和服务器代码以及Byte Rot Formatter(未显示但在其网站上提供)将数据正确地传输到服务器.
4. 我已经验证了jpeg在服务器上作为byte []和字符串参数元数据正确接收.
5. 我使用Fiddler来验证是否将正确的响应发送回客户端.
   • 大小是正确的
   • 该图像可在Fiddler中查看.

6. 我的问题是下面显示的Angular客户端代码中的服务器响应不正确.

   • 如果不正确,我的意思是错误的大小(~10K对比~27.5K)并且它不被识别为UintArray构造函数的有效值.当我将光标放在下面客户端代码中显示的返回"响应"上时,Visual Studio显示JFIF,但没有其他可见的内容指示符.

/**********************服务器代码************************/ 在[FromBody] byte []之后为代码添加了缺失项

public class ItemUploadController : ApiController{ 
[AcceptVerbs("Post")]
    public HttpResponseMessage Upload(string var1, string var2, [FromBody]byte[] item){
        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new MemoryStream(item);
        result.Content = new StreamContent(stream);
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        return result;
    }
}

/*****************示例客户端代码********************/

我从代码中省略的唯一内容是实际的变量参数.

$http({
url: 'api/ItemUpload/Upload',
    method: 'POST',
    headers: { 'Content-Type': 'application/octet-stream' },// Added per Byte Rot blog...
    params: {
        // Other params here, including string metadata about uploads
        var1: var1,
        var2: var2
    },
data: new Uint8Array(item),
// arrybuffer must be lowecase. Once changed, it fixed my problem.
responseType: 'arraybuffer',// Added per http://www.html5rocks.com/en/tutorials/file/xhr2/
transformRequest: [],
})
.success((response, status) => {
    if (status === 200) {
        // The response variable length is about 10K, whereas the correct Fiddler size is ~27.5K.
        // The error that I receive here is that the constructor argument in invalid.
        // My guess is that I am doing something incorrectly with the AngularJS code, but I
        // have implemented everything that I have read about. Any thoughts???
        var unsigned8Int = new Uint8Array(response);
        // For the test case, I want to convert the byte array back to a base64 encoded string
        // before verifying with the original source that was used to generate the byte[] upload.
        var b64Encoded = btoa(String.fromCharCode.apply(null, unsigned8Int));
        callback(b64Encoded);
    }
})
.error((data, status) => {
    console.log('[ERROR] Status Code:' + status);
});

/**********************************/

任何帮助或建议将不胜感激.

谢谢...

编辑包含更多诊断数据

首先,我使用angular.isArray函数来确定响应值不是数组,我认为它应该是.

其次,我使用以下代码来查询响应,该响应似乎是一个不可见的字符串.前导字符似乎不对应于图像字节数组代码中的任何有效序列.

var buffer = new ArrayBuffer(response.length);
var data = new Uint8Array(buffer);
var len = data.length, i;
for (i = 0; i < len; i++) {
    data[i] = response[i].charCodeAt(0);
}

实验结果

我通过在服务器上创建0到255的字节数组值来运行实验,我下载了它.AngularJS客户端正确地接收了前128个字节(即0,1,...,126,127),但其余值在Internet Explorer 11中为65535,在Chrome和Firefox中为65533.Fiddler显示通过网络发送了256个值,但AngularJS客户端代码中只收到217个字符.如果我只使用0-127作为服务器值,一切似乎都有效.我不知道是什么导致这种情况,但客户端响应似乎更符合有符号字节,我认为这是不可能的.

来自服务器的Fiddler Hex数据显示256个字节,其值范围为00,01,...,EF,FF,这是正确的.正如我之前提到的,我可以返回一个图像并在Fiddler中正确查看,因此Web API服务器接口适用于POST和GET.

我正在尝试使用vanilla XMLHttpRequest来查看我可以在AngularJS环境之外工作.

XMLHttpRequest测试更新

我已经能够确认vanilla XMLHttpRequest与服务器一起用于GET,并且能够返回正确的字节代码和测试图像.

好消息是我可以破解AngularJS以使我的系统正常工作,但坏消息是我不喜欢这样做.我更愿意与Angular保持所有客户端服务器通信.

我将在Stack Overflow上打开一个单独的问题,它只涉及我对AngularJS的GET byte []问题.如果我能得到解决方案,我将使用解决方案更新此问题,以帮助其他人.

更新

Google网上论坛上的Eric Eslinger向我发送了一个小代码段,突出显示responseType应为"arraybuffer",全部为小写.我更新了上面的代码块以显示小写值并添加了注释.

谢谢...

Answer 1

我终于收到了Eric Eslinger对Google Group的回复.他指出他使用

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

他提到camelcase可能很重要,它就是这样.更改了一个字符,整个流程现在正在运行.

所有功劳归功于Eric Eslinger.