欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
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 或服务器中。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64173.shtml