javascript AngularJS:将二进制数据从 ArrayBuffer PUT 到服务器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25152700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 04:03:31  来源:igfitidea点击:

AngularJS: PUT binary data from ArrayBuffer to the server

javascriptangularjs

提问by joerx

Ok, so I try to read a PDF file like this:

好的,所以我尝试阅读这样的 PDF 文件:

reader.readAsArrayBuffer(file);

and then try to send it to the server using $httplike this:

然后尝试使用$http如下方式将其发送到服务器:

$http.put(url, data, {headers: {'Content-Type': 'application/pdf'}});

So, just read & send the binary to the server in raw form. According to some resources I found, passing an ArrayBuffer to XHRshouldwork, but passing it as data to $httpjust results in a request bodylike this: {}and Content-Length=2

因此,只需读取二进制文件并将其以原始形式发送到服务器即可。据一些资源,我发现,传递一个ArrayBuffer以XHR工作,但将它作为数据$http的请求,只是结果body是这样的:{}Content-Length=2

Reading the file readAsBinaryString()results in a corrupted file (and is apparently deprecated for that very reason)

读取文件会readAsBinaryString()导致文件损坏(因此显然已被弃用)

The use case seems so trivial to me, am I missing something?

用例对我来说似乎微不足道,我错过了什么吗?

Chrome 36, Angular 1.2.20

铬 36,角 1.2.20

回答by tbaetz

You have to use reader.readAsArrayBuffer(file);then in the onloadcallback create an ArrayBufferViewfrom the result:

您必须reader.readAsArrayBuffer(file);onload回调中使用thenArrayBufferView从结果中创建一个:

new Uint8Array(reader.result)

pass that data to $httpand overwrite the transformRequestproperty so angularjs doesn't encode your array into json:

将该数据传递给$http并覆盖该transformRequest属性,因此 angularjs 不会将您的数组编码为 json:

reader.onload = function() {
    $http({
        method: 'PUT', 
        headers: {'Content-Type': 'application/pdf'}, 
        data: new Uint8Array(reader.result), 
        transformRequest: []
    })
};
reader.readAsArrayBuffer(file);

回答by Kristian Barrett

Is it because you are just handing the $http method the array buffer instead of writing that buffer into a byte array? If so what you are posting to the server is probably just the arraybuffer object.

是不是因为您只是将 $http 方法传递给数组缓冲区而不是将该缓冲区写入字节数组?如果是这样,您发布到服务器的内容可能只是 arraybuffer 对象。

Check this post on how to write ArrayBuffer to byte array: How do I read binary data to a byte array in Javascript?

查看有关如何将 ArrayBuffer 写入字节数组的帖子: How do I read binary data to a byte array in Javascript?

回答by Charlie

There are two problems in your request.

你的请求有两个问题。

  1. You need to supply a data view to $http function.
  1. 您需要为 $http 函数提供数据视图。

So, datashould be new DataView(data)or new Uint8Array(data)etc

所以,data应该是new DataView(data)new Uint8Array(data)

  1. $http always attempt to send the data as json. You can prevent this if you override the transform function. The transform function is the agent that is responsible for transforming your binary into json.
  1. $http 总是尝试将数据作为 json 发送。如果您覆盖转换功能,您可以防止这种情况。转换函数是负责将二进制文件转换为 json 的代理。

So, you should add transformRequest: []property to your request.

因此,您应该将transformRequest: []属性添加到您的请求中。

Example:

例子:

var request = $http({
                        method: 'PUT',
                        url: 'example.com',
                        data: new Uint8Array(data),
                        headers: {'Content-Type': 'application/octet-stream'},  
                        transformRequest: [],
                        responseType: 'arraybuffer'
                    });