JavaScript 中 Blob对象的初步认识

Blob

• Binary Large Object的缩写,二进制大对象
• 虽然在前端中开发并不常见,但是实际上MySql数据库中，可以通过设置一个Blob类型的数据来存储一个Blob对象的内容

语法

let blob = new Blob(Array,options)
// 参数Array: 是由一个`ArrayBuffer` `ArrayBufferView` `Blob` `DOMString` 组成的`Blob`对象,表示一个不可变的,原始数据的类文件对象,编码格式为`UTF-8`
// 参数options: 表示文件类型 `text/json`表示 JSON文件, `text/html`表示HTML文件, `application/pdf`表示PDF文件，`image/jpeg`表示图片文件

blob对象上的方法

let blob = new Blob(['hello world'],{text/plain})
console.info(blob.size) // 获取blob对象的大小(字节)
console.info(blob.type) // 获取blob对象的文件类型
console.info(blob.slice(0,5,'text/plain')) // 返回一个新的Blob对象，包含了源Blob对象中的指定范围内的数据,通常用于大文件截取上传

生成Blob url

// 将文件流转换成url
let blob = new Blob(['hello world'],{text/plain})
let url = URL.createObjectURL(blob)
document.getElementById('link').href=url
// 销毁url
URL.revokeObject(url)

封装转换函数

// 将文件流转换成url
export function getObjectURL(data) {
  let url = null
  // basic validate
  if (window.createObjectURL != undefined) {
    url = window.createObjectURL(data)
  } else if (window.webkitURL != undefined) {
    // webkit or chrome
    try {
      url = window.webkitURL.createObjectURL(data)
    } catch (error) {
      console.info(error)
    }
  } else if (window.URL != undefined) {
    // mozilla(firefox)
    try {
      url = window.URL.createObjectURL(data)
    } catch (error) {
    }
  }
  return url
}