有时候我们需要从后端接口返回的二进制流数据中读取文件内容。在控制台中查看二进制流,会看到下面这样的东西:

1.jpg

这就需要前端读取二进制数据。

使用fileReader

如果你要将获取到的流显示出来,比如一张图片,那么一般都是通过将二进制流转换为blob,然后使用fileReader读取DataURL,并将它赋值给imgsrc

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可以直接用在imgsrc属性上。

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''
之后,需要借助adownload属性,下载这个文件:
var link = document.createElement('a');
link.href = url;
link.download = 'fileName.jpg';
document.body.append(link);
link.click();
link.remove();
此时文件已经自动下载了。注意,adownload属性要设置正确的带扩展名的文件名,这样才能正确下载文件,而不必设置文件的mime
最后,别忘了调用如下方法释放资源:
URL.revokeObjectURL(url);
END

标签: JavaScript, fileReader, blob, 二进制流

添加新评论