AngularJS：将二进制数据从 ArrayBuffer 发送到服务器答案

【问题标题】：AngularJS: PUT binary data from ArrayBuffer to the serverAngularJS：将二进制数据从 ArrayBuffer 发送到服务器
【发布时间】：2014-08-06 05:14:11
【问题描述】：

好的，所以我尝试阅读这样的 PDF 文件：

reader.readAsArrayBuffer(file);

然后尝试使用$http 将其发送到服务器，如下所示：

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

所以，只需读取二进制文件并将其以原始形式发送到服务器。根据我发现的一些资源，将 ArrayBuffer 传递给 XHR 应该可以工作，但将其作为数据传递给 $http 只会导致请求 body 像这样：{} 和 @987654328 @

读取文件readAsBinaryString() 会导致文件损坏（显然出于这个原因已弃用）

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

Chrome 36，Angular 1.2.20

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您必须使用reader.readAsArrayBuffer(file);，然后在onload 回调中从结果中创建ArrayBufferView：

new Uint8Array(reader.result)

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

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

【讨论】：

AngularJS 将所有内容编码为 json 是否只是标准行为？我不明白为什么要将字节数组编码为 json 数据。
@tbaetz：我用它敲了近两天的头......谢谢你的回答。
@tbaetz：工作了半天，终于被你的解决方案救了。你太棒了，伙计。
除了二进制文件之外，将其他参数/元数据传递给 WebAPI 方法怎么样？我的方法将 PDF 字节数组作为它需要的几个参数之一。

【解决方案2】：

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

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

【讨论】：

几乎，但如果不覆盖transformRequest，它仍然无法工作。

【解决方案3】：

您的请求有两个问题。

您需要为 $http 函数提供数据视图。

所以，data 应该是 new DataView(data) 或 new Uint8Array(data) 等

$http 总是尝试以 json 格式发送数据。如果您覆盖转换功能，您可以防止这种情况发生。转换函数是负责将二进制文件转换为 json 的代理。

因此，您应该在请求中添加 transformRequest: [] 属性。

例子：

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

【讨论】：