2024年前端最新前端提高篇(七十四)：FileReader文件操作及Blob对象，技术实现

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

}

}

}

已经选择了两个文件，一个png图片，一个txt文件，然后点击提交：

**FileReader对象

负责把文件读入内存，并且读取文件中的数据**

1.读取并显示文件

readAsText() 将文件中的数据读取成文本数据

readAsBinaryString()读取为二进制字符串

readAsDataURL()读取为DataURL字符串

readAsArrayBuffer()读取为一个ArrayBuffer对象

abort()终端读取操作

2.检测读取事件

onabort：数据读取中断时触发

onprogress：数据读取中触发

onerror：数据读取出错时触发

onload：数据读取完成并成功时触发

onloadstart：数据开始读取时触发

onloadend：数据读取完成时触发，不论成功还是失败

btn.onclick = function(){

var fileList = file.files;

var len = fileList.length;

// console.log(fileList);

for (var i = 0; i < len; i++){

if (fileList[i].type == ‘image/png’){

//执行上传代码

alert(fileList[i].name + ‘上传成功！’);

}else if (fileList[i].type == ‘text/plain’){

var reader = new FileReader();

reader.readAsText(fileList[i]);//读取具体内容，此处不能写this，指的是btn

reader.onload = function(){

console.log(reader.result);//读取完成后打印内容

//执行上传操作

}

}

}

}

效果：

如果读取成二进制，中文会乱码

文本内容是：hello 世界

读取成文本：

读取成二进制readAsBinaryString：

readAsDataURL可以用来读取图片，转为base64格式：

btn.onclick = function(){

var fileList = file.files;

var len = fileList.length;

// console.log(fileList);

for (var i = 0; i < len; i++){

if (fileList[i].type == ‘image/png’){

alert(fileList[i].name + ‘上传成功！’);

var reader = new FileReader();

reader.readAsDataURL(fileList[i]);

reader.onload = function(){

console.log(reader.result);

var img = new Image();

img.src = reader.result;

document.body.appendChild(img);//将图片加到dom中

}

}

}

}

获取图片的DataURL，即base64编码，赋给新img，再将img加到dom中：

Blob对象

1.blob对象的访问

2.blob对象的创建

3.截取blob对象

blob可以存储只读原始数据的类文件，可以用于存储二进制数据；

File接口基于Blob，继承了Blob的功能（type和size属性）,blob支持截取文件，比如上传一个大视频，会截取成几段再传

var blob = new Blob([‘asdf’]);

var reader = new FileReader();

reader.readAsText(blob);

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-By07tGb7-1715024493064)]

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】