Skip to content

blob与file

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

Blob

实例属性

  • size:大小
  • type:类型

实例方法

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

Blob 应用场景

下载文件

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

js
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

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

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

FileReader

读取Blob对象的内容

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

读取文本文件例子

html
<input type="file" id="filePicker">
js
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 实例对象。