使用JS的FileReader对象读取blob对象二进制数据
# 使用JS的FileReader对象读取blob对象二进制数据
# FileReader对象
使用FileReader对象可以读取文件，可以使用File对象或者Blob对象来指定所要处理的文件或数据。
# FileReader的方法
FileReader有四个方法，三个用来读取文件，一个中断读取，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
abort()中断读取readAsBinaryString(file)将文件读取为二进制码readAsDataURL(file)将文件读取为 DataURLreadAsText(file, [encoding])将文件读取为文本
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传到后端，后端可以通过这段字符串存储文件。
readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的）
# FileReader的处理事件
onabort中断时触发onerror出错时触发onload文件读取成功完成时触发onloadend读取完成触发，无论成功或失败onloadstart读取开始时触发onprogress读取中
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
# 使用场景
解析上传后的html文件并渲染在文档中
async handleSuccess(response, file) {
const _this = this;
const reader = new FileReader();
if (file && file.status === "success") {
this.$message({
message: "文件上传成功！",
type: "success",
});
reader.readAsText(file.raw, "utf-8");
reader.onload = function (res) {
_this.$refs.innerHtml.innerHTML = "<p>" + res.target.result + "</p>";
}
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
这里使用ele的upload组件，使用它的文件上传成功的钩子，拿到文件对象，使用FileReader提供的方法对文件进行解析，拿到文件内容后再渲染到文档中。
# 参考
MDN文档-FileReader对象 (opens new window)
在GitHub上编辑 (opens new window)
上次更新: 4/11/2022, 3:09:54 PM