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 操控 Fileconst reader = new FileReader()// 开始转成 base64reader.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) {// 接受 Fileconst file = event.target.files[0]// 生成 urlconsole.log(URL.createObjectURL(file))}</script>
</body>
</html>

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 或服务器中。

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob