您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文小编为大家详细介绍“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的概念是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。