C#学习教程：使用AngularJS和ASP.NETWebAPI上载/下载字节数组分享

使用AngularJS和ASP.NETWebAPI上载下载字节数组我花了几天时间研究和研究上传下载byte[]的解决方案。我很接近，但有一个问题似乎出现在我的AngularJS代码 使用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是否将正确的响应发送回客户端。

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

/ **********************服务器代码************************ / 在[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 实验结果

我通过在服务器上创建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。

上述就是C#学习教程：使用AngularJS和ASP.NET Web API上载/下载字节数组分享的全部内容，如果对大家有所用处且需要了解更多关于C#学习教程，希望大家多多关注编程笔记