1、什么是FileReader
一般情况下，blob/file里面的内容是无法直接读取的，FileReader的作用就是读取blob/file里面的内容；
2、FileReader提供了以下四个加载文件的方法：
(1)、FileReader.readAsArrayBuffer():读取指定的Blob中的内容，完成之后，result属性中包含的将是被读取文件的ArrayBuffer数据对象；
(2)、FileReader.readAsBinaryString():读取指定Blob中的内容，完成之后，result属性中将包含所读取文件的原始二进制数据；
(3)、FileReader.readAsDataURL():读取指定Blob中的内容，完成之后，result属性中将包含一个data:URL格式的Base64字符串以表示所读取文件的内容；
(4)、FileReader.readAsText():读取指定Blob中的内容，完成之后，result属性中将包含一个字符串以表示所读取的文件内容；
3、使用方法举例
.dropArea{
width: 300px;
height: 300px;
border:pink 1px solid;
}
<div class="dropArea" id="dropID"></div>
<script>
let dropObj = document.getElementById('dropID')
// 拖拽事件-默认是禁止的
dropObj.ondragover = (e)=> {
// 阻止默认事件-允许元素/数据停留在该元素
e.preventDefault();
}
// 在拖拽过程中，释放鼠标时触发（拖拽结束事件）
dropObj.ondrop = (e) =>{
// 阻止默认事件
e.preventDefault()
// 获取文件-返回的是一个file文件对象
let file = e.dataTransfer.files;
let reader = new FileReader()
reader.readAsDataURL(file[0])
reader.onload = (event) =>{
// 获取经reader.readAsDataURL()处理后的base64数据
console.log(event.target.result)
}
}
</script>
#文档参考自：bilibiliUP主我们一起学前端#
