使用AngularJS和ASP.NET Web API上载/下载字节数组
我花了几天时间研究和研究上传/下载byte []的解决方案。 我很接近，但有一个问题似乎出现在我的AngularJS代码块中。
在SO上有一个类似的问题，但它没有回应。 请参阅https://stackoverflow.com/questions/23849665/web-api-accept-and-post-byte-array
以下是在我陈述问题之前设置上下文的一些背景信息。
- 我正在尝试创建一个通用的客户端/服务器接口来上传和下载byte []，它们被用作专有服务器数据库的一部分。
- 我在客户端上使用TypeScript，AngularJS，JavaScript和Bootstrap CSS来创建单页面应用程序（SPA）。
- 我在服务器上使用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中的控制器返回二进制文件
- 我在客户端使用转换为Uint8Array的jpeg作为我的测试用例。
- 实际的系统字节数组将包含压缩成预定义数据包的混合内容。 但是，我需要能够处理任何有效的字节数组，因此图像是一个有效的测试用例。
- 使用下面显示的客户端和服务器代码以及Byte Rot Formatter（未显示但在其网站上提供）将数据正确地传输到服务器。
- 我已经validation了jpeg在服务器上作为byte []和字符串参数元数据正确接收。
- 我使用Fiddler来validation是否将正确的响应发送回客户端。
- 大小是正确的
- 图片可在Fiddler中查看。
-
我的问题是下面显示的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”，全部为小写。 我更新了上面的代码块以显示小写值并添加了注释。
谢谢…
我终于收到了Eric Eslinger对Google Group的回复。 他指出他使用
$http.get('http://example.com/bindata.jpg', {responseType: 'arraybuffer'}).
他提到camelcase可能很重要，它就是这样。 更改了一个字符，整个流程现在正在运行。
所有功劳归功于Eric Eslinger。