blob与file

Blob 对象表示一个二进制文件的数据内容,是Binary Large Object （二进制大型对象）的缩写

Blob

实例属性

• size:大小
• type:类型

实例方法

• slice(start?,end?,contenType?):用来拷贝原来的数据，返回的也是一个Blob实例。

Blob 应用场景

下载文件

responseType属性为blob，下载下来的就是一个 Blob 对象。

function getBlob(url, callback) {
  let xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.responseType = 'blob'
  xhr.onload = function () {
    // 这里返回的就是一个blob
    callback(xhr.response)
  }
  xhr.send(null)
}

生成文件的临时url

比如选择图片文件时生成缩略图

function getBlobUrl(blob) {
  return URL.createObjectURL(blob)
}

FileReader

读取Blob对象的内容

• readAsText:返回文本默认UTF-8
• readAsArrayBuffer:ArrayBuffer对象
• readAsDataURL:返回Data URL
• readAsBinaryString:返回原始二进制字符串

读取文本文件例子

<input type="file" id="filePicker" />

let picker = document.querySelector('#filePicker')
let reader = new FileReader()
reader.onload = function () {
  var text = reader.result
  let pre = document.createElement('pre')
  pre.textContent = text
  document.body.append(pre)
}
picker.addEventListener('change', function (e) {
  let file = e.currentTarget.files[0]
  reader.readAsText(file, 'UTF-8')
})

File

File 实例对象是一个特殊的 Blob 实例，增加了name(文件名称)和lastModifiedDate(最后修改时间)属性。它继承了 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它

最常见的获取方式就是<input type="file">，用户选中文件以后，浏览器就会生成一个数组，里面的内容就是选择的文件,它们都是 File 实例对象。

参考

网道JavaScript