有时候我们需要从后端接口返回的二进制流数据中读取文件内容。在控制台中查看二进制流，会看到下面这样的东西：
这就需要前端读取二进制数据。
使用fileReader
如果你要将获取到的流显示出来，比如一张图片，那么一般都是通过将二进制流转换为blob，然后使用fileReader读取DataURL，并将它赋值给img的src。
以axios和请求一个图片为例。
首先，如果请求获取的是二进制数据，需要设置请求类型：
request({
//...
responseType: 'arraybuffer'
//...
})
获取到数据后，将接口返回的数据转换成blob：
request({...}).then(r => {
let myblob = new Blob([r], { type: 'image/*' })
})
接着，使用fileReader读取blob：
request({...}).then(r => {
let myblob = new Blob([r], { type: 'image/*' });
let reader = new FileReader();
reader.readAsDataURL(myblob);
reader.onload = function () {
console.log(reader.result);
};
})
以上代码将会打印出下面这种字符：
data:base64; image/*, foiHirf89hHoheruiefhi......
这样的Data URL可以直接用在img的src属性上。
fileReader还提供了readAsArrayBuffer()、readAsText()等方法，用来读取不同类型的内容。
使用URL.createObjectURL
如果你想把流下载下来，那么使用此方法比较合适。
使用URL.createObjectURL(blob)可以创建一个指向blob内容的url。获取blob的步骤和之前一样，获取到 blob 后，使用下面的代码创建 ObjectURL：
const blob = ......;
const url = URL.createObjectURL(blob);
//生成的url如下：
'blob:http://localhost:9999/0a147e01-97a4-482a-8aa3-e44a2bf79478''
之后，需要借助a的download属性，下载这个文件：
var link = document.createElement('a');
link.href = url;
link.download = 'fileName.jpg';
document.body.append(link);
link.click();
link.remove();
此时文件已经自动下载了。注意，a的download属性要设置正确的带扩展名的文件名，这样才能正确下载文件，而不必设置文件的mime。
最后，别忘了调用如下方法释放资源：
URL.revokeObjectURL(url);
END