标签 fileReader 下的文章

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

1.jpg

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

使用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