文末
js前端的重头戏，值得花大部分时间学习。
推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
这是288页的前端面试题
#### 4.fileReader对象
构造函数方式实例化一个fileReader对象，readAs()方法将文件对象读取成base64格式或者文本格式
### 2、二进制blob对象传输
**上传时将文件转为blob对象，通过FormData对象搭载传递**
使用vue-cli搭建了一个基础框架，代码如下
#### 2.1文件上传前的判断操作
file组件
提交
console.log(e.target.files)打印结构如下：
由此可见其是一个由多个文件对象组成的对象，每个文件对象内部又有多个属性，比较常用size和type属性做文件上传之前的大小和类型判断。
#### 2.2files与blob转换 缩略图和文本预览
`files`对象与`blob`对象的相互转换和`blob`对象的切割方法 :项目中实现缩略图和文本预览
methods:{ fileChange(e){ let files = e.target.files[0];
let _newBlob = new Blob([files]);//将files对象转为blob对象,第一个参数必须是数组
console.log(_newBlob);
//slice()方法 ： 切割blob对象,从XX位到XX位
let _sliceBlob = _newBlob.slice(0,5000);
console.log(_sliceBlob);
//将切割后的blob对象转为files对象
let _sliceFile = new File([_sliceBlob],'test.jpg')
console.log(_sliceFile);
//fileReader对象 将文件异步方式转为base64格式或文本格式
// fr.readAsDataURL() 转换为base64格式
// fr.readAsText() 转换为文本格式
let fr = new FileReader();//实例化FileReader对象
fr.readAsDataURL(_sliceFile)
// fr.readAsDataURL(files)
//FileReader对象的readAs方法是异步的，只能通过onload事件监听获取转换的结果
fr.onload = ()=>{
console.log(fr.result);
//实现文件上传前的缩略图预览
this.imgbase64 = fr.result;
}
},
};
},
控制台输出如下:
四次输出顺序分别为切割前的`blob`对象、切割后的`blob`对象、转换的files文件对象、读取成base64格式的文件对象
可以看到切割前的`blob`对象与切割后的`blob`对象的大小区别，以及文件读取成base64格式后明显不完整
#### 2.3单文件上传
#### 2.4多文件上传
将多个文件放到一个数组内，然后循环上传这个数组内的文件对象
如果使用input元素的multiple属性规定可以选择多个文件上传,从用户层面来说并不合适。(因为选择文件的时候要按Ctrl键) 建议使用js拼接input元素获取到的文件对象
#### 2.5切片上传
### 最后
**文章到这里就结束了，如果觉得对你有帮助可以点个赞哦**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
