本文小编为大家详细介绍“JS中File和Blob的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“JS中File和Blob的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
File / Blob 是什么
Blob 是最原始的文件对象，File 是基于 Blob 改造的，因此 Blob 的属性/方法在 File 中同样可以使用，你可以理解为 File === Blob，像 input 选择文件后会返回的文件信息就是属于 File
怎么操作 File / Blob
JS 提供的 FileReader 、URL.createObjectURL（） 都可以处理 File / Blob
FileReader
FileReader 可以用来读取 File / Blob ， input 选择上传文件时比如是一张图片 File ，那么我们可以传递这个 File 到 FileReader 提供相关的 API 来转成对应的数据
FileReader APi
reader.readAsDataURL（file || blob） 转成 base64
reader.readAsArrayBuffer（file || blob） 转成缓冲数组
reader.readAsText（file || blob） 转成文本
reader.readAsBinaryString（file || blob） 转成字节
我们来看看 demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file" onchange="onChange（event）" />
<script type="text/javascript">
// 文件上传后的回调
function onChange（event） {
// 接受 input 传递过来的 File，这里返回的数组，我们取第一个就好。
const file = event.target.files[0]
// 开始利用 FileReader 操控 File
const reader = new FileReader（）
// 开始转成 base64
reader.readAsDataURL（file）
// 转成base64 后 可通过 onload 来获取
reader.onload = （res） => {
console.log（res.target.result） // base64
}
}
</script>
</body>
</html>
控制台打印出 base64
拿到 base64 后就可以做你想做的事情了，比如放到 img.src 或粘贴到浏览器访问
URL.createObjectURL（）
URL.createObjectURL（） 可以将 File / Blob 转成一个 url 访问链接，
格式类似为：blob:wer3-werwr3-wer-qweq5-eedee 这样的字符串，你可以放到 img.src 或粘贴到浏览器访问，我们来看看 demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<input type="file" onchange="onChange（event）" />
<script type="text/javascript">
// 文件上传后的回调
function onChange（event） {
// 接受 File
const file = event.target.files[0]
// 生成 url
console.log（URL.createObjectURL（file））
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
base64 和 blob:url 应用场景
base64 通常用于图片展示、图片预览
blob: url 通常用于分块上传、点击链接文件下载、生成 pdf 等、
手动创建 Blob
由于选择 input 文件会自动返回 File，这里就以创建 Blob 为例，
我们可以将对象数据放到 Blob 里面然后生成 blob:url || base64 || 文本数据
我们来看下 demo
const obj = {name: 'Jack'}
// 将数据放到 blob
const blob = new Blob（[JSON.stringify（obj , null, 2）], {type : 'application/json'}）;
// 转成 base64
const reader = new FileReader（）
reader.readAsDataURL（blob）
reader.onload = （res） => {
console.log（res.target.result）
}
// 转成 url
console.log（URL.createObjectURL（blob））
// 直接读取文本（创建 blob 会返回一个 promise ，所以我们可以用 await 来获取）
console.log（await blob.text（））
好了，内容就到这里，相信你已经对 FIle / Blob 基本概念有所了解。
Note
生成的 base64 和 url 并不是持久化，它们只是存在内存中，当你关闭文档后会自动从内存中删掉，因此你不可以将它们放到 localStore 或服务器中。
读到这里，这篇“JS中File和Blob的概念是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
