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)
}

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)
}

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

FileReader

读取Blob对象的内容

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

读取文本文件例子

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

<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")
})

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