不懂就问， Blob 类型，怎么通过 fileBinary 属性转化成 ArrayBuffer 的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1532 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近在修一个 legacy bug，看到一段不太懂的代码。

调用的是 dropbox 的 api （参考这个链接） https://www.dropbox.com/developers/documentation/http/documentation#files-download

这里的 dropbox 的文档就有点问题。该 API 的返回值，其实包含一个 property named fileBlob，类型是 Blob （在文档里面没有写出来）

我们就是通过这个 fileBlob 拿到下载文件的内容。

我们代码大约是：

async get(fileId: string): Promise<ArrayBuffer> {

“blabla...”

const fileData = await [dropbox SDK client API call]
return (fileData as any).fileBinary;

}

成功返回了。内容也都拿到了。但是，这里，我不理解的是， fileData 的类型是 dropbox.files.FileMetadata, 这个里面只有 property - fileBlob，类型是 Blob，没有 fileBinary 啊？这是怎么通过(fileData as any).fileBinary 转化成 ArrayBuffer 的？

更骚的是，外面的调用者，直接通过下面这段来判断文件大小，也是成功的。

const fileData = await get("fileid");
(fileData as Buffer).length

google 了一些 ArrayBuffer, Blob, and Buffer 的相关资料，也没发现能够这样转换啊？

特来请教一下。有没有老司机 /大神解惑一下。

谢谢！

4 条回复 • 2020-09-17 12:34:30 +08:00

akatquas

2020-09-16 18:59:43 +08:00

看了[这个例子]( https://github.com/dropbox/dropbox-sdk-js/blob/b2353edeb221ec17b8e70a1d8fd4799e2f1f031d/examples/typescript/node/download.ts#L20)里面的注释。

然后找了一下[源代码]( https://github.com/dropbox/dropbox-sdk-js/blob/4ba071b3f184538f24fffa34e40aca15d663f53d/src/download-request.js)，在非浏览器环境中，会在返回结果里面强行加上这个 `fileBinary`。然后再看这个文件的 [63 行]( https://github.com/dropbox/dropbox-sdk-js/blob/4ba071b3f184538f24fffa34e40aca15d663f53d/src/download-request.js#L63) 和 [64 行]( https://github.com/dropbox/dropbox-sdk-js/blob/4ba071b3f184538f24fffa34e40aca15d663f53d/src/download-request.js#L64)，第二个参数 data 的来源其实就是 [8 行]( https://github.com/dropbox/dropbox-sdk-js/blob/4ba071b3f184538f24fffa34e40aca15d663f53d/src/download-request.js#L8) 的 `res.blob()` （浏览器环境）或者 `res.buffer()` （ node 环境）的返回值。

至于这个 `res` ，不难观察其实就是 `fetch.Response` 对象。

参考 [node-fetch 的实现]( https://github.com/node-fetch/node-fetch/blob/master/src/body.js#L138)，`res.buffer()` 处理的就是 `Buffer` 对象。剩下的逻辑就是 nodejs 部分中， `Buffer` 和 `ArrayBuffer` 的故事了。

yazoox

2020-09-17 08:09:32 +08:00

@akatquas
谢谢。清晰了好多。

dropbox 的 API 文档太坑了，这也不写，那也不写。fileBlob 没有写，fileBinary 也不写，还得去看源代码。
这一点，以前确实不知道: web & node 环境，这内容的返回类型还不同，blob or buffer，难道统一不好么？
还是说，因为技术限制 or 某些约定俗成 or best practice?

akatquas

2020-09-17 10:04:11 +08:00

@yazoox
浏览器环境里面没有 buffer，它使用了 [blob]( https://developer.mozilla.org/en-US/docs/Web/API/Blob) 来实现的二进制数据处理。

简单的说 blob 就是浏览器下面的 buffer .

rioshikelong121

2020-09-17 12:34:30 +08:00

Blob 是对 ArrayBuffer 的高级抽象。ArrayBuffer 是 JS 操作二进制的基本机制。

具体可见： https://javascript.info/arraybuffer-binary-arrays