草庐IT

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

coder 2024-05-12 原文

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

SO上有一个类似的问题,但没有回应。见 https://stackoverflow.com/questions/23849665/web-api-accept-and-post-byte-array

在我陈述我的问题之前,这里有一些背景信息来设置上下文。

  • 我正在尝试创建一个通用的客户端/服务器接口(interface)来上传和下载 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

    Returning binary file from controller in ASP.NET Web API
  • 我正在使用转换为 Uint8Array 的 jpeg 作为客户端上的测试用例。
  • 实际的系统字节数组将包含压缩成预定义数据包的混合内容。但是,我需要能够处理任何有效的字节数组,因此图像是有效的测试用例。
  • 使用下面显示的客户端和服务器代码以及字节轮转格式器(未显示,但在其网站上可用)将数据正确传输到服务器。
  • 我已经验证 jpeg 在服务器上作为 byte[] 以及字符串参数元数据正确接收。
  • 我已经使用 Fiddler 来验证是否将正确的响应发送回客户端。
  • 尺码正确
  • 该图像可在 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 服务器接口(interface)适用于 POST 和 GET。

    我正在尝试 vanilla XMLHttpRequest 以查看我可以在 AngularJS 环境之外工作。

    XMLHttpRequest 测试更新

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

    好消息是我可以绕过 AngularJS 来让我的系统正常工作,但坏消息是我不喜欢这样做。我更愿意使用 Angular 进行所有客户端服务器通信。

    我将在 Stack Overflow 上开一个单独的问题,它只处理我在 AngularJS 中遇到的 GET byte[] 问题。如果我能得到解决方案,我将使用解决方案更新此问题以用于历史目的以帮助他人。

    更新

    Google Groups 上的 Eric Eslinger 给我发了一个小代码段,强调 responseType 应该是“arraybuffer”,全部小写。我更新了上面的代码块以显示小写值并添加了注释。

    谢谢...

    最佳答案

    我终于在 Google Group 上收到了 Eric Eslinger 的回复。他指出他使用

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

    他提到 Camel shell 可能很重要,确实如此。更改了一个字符,现在整个流程都在运行。

    所有功劳都归功于埃里克·埃斯林格。

    关于javascript - 使用 AngularJS 和 ASP.NET Web API 上传/下载字节数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26005687/

    有关javascript - 使用 AngularJS 和 ASP.NET Web API 上传/下载字节数组的更多相关文章

    1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

      我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

    2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

      我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

    3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

      类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

    4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

      很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

    5. ruby - 在 Ruby 中使用匿名模块 - 2

      假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

    6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

      我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

    7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

      关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

    8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

      我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

    9. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    10. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

      我有多个ActiveRecord子类Item的实例数组,我需要根据最早的事件循环打印。在这种情况下,我需要打印付款和维护日期,如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询,用于查找maintenance和payment项目(非排他性查询),并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

    随机推荐