liu__software
liu__software

详解Blob、File、FileReader、ArrayBuffer、ArrayBufferView、DataURL、URL对象

本文深入介绍HTML5里的几种对象：Blob、File、FileReader、ArrayBuffer、ArrayBufferView、DataURL、URL

一. Blob

一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。

Blob对象可以看做是存放二进制数据的容器，但要读取里面的二进制数据，需要用FileReader；此外还可以通过Blob设置二进制数据的MIME类型。

/**
* Blob构造函数：
* dataArray：数组，包含了要添加到Blob对象中的数据，数据可以是Int32Array、Uint8Array、Float32Array等，或者连续内存缓冲区ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
* opt：对象，用于设置Blob对象的属性（如：MIME类型）
**/
var blob = new Blob(dataArr:Array, opt:{type:string});
  1. 创建一个装填DOMString对象的Blob对象
var s = '
hello
'
var blobObj = new Blob([s], {type: 'text/xml'})
  1. 创建一个装填ArrayBuffer对象的Blob对象
var abf = new ArrayBuffer(8)
var blobOjb = new Blob([abf], {type: 'text/plain'})
  1. Blob.slice()
    此方法返回一个新的Blob对象，包含了原Blob对象中指定范围内的数据，利用此发放可以实现大文件的分片上传
/**
* start：开始索引，默认为0
* end：截取结束索引（不包括end）
* contentType：新Blob的MIME类型，默认为空字符串
**/
Blob.slice(start:number, end:number, contentType:string)
  1. Canvas.toBlob()
    canvas转为blob对象
  2. 实现url下载文件
    window.URL对象可以为Blob对象生成一个网络地址，结合a标签的download属性，可以实现点击url下载文件
function createDownload(fileName, content){
    var blob = new Blob([content]);
    var link = document.createElement("a");
    link.download = fileName;
    link.href = URL.createObjectURL(blob); //可以直接当作image的src属性来显示图片
    link.click()
}

二. File

File是Blob的子类，比blob主要多出一个name的属性。

我们常用的文件选择标签元素就拥有一个files属性，这个files就是File类型

var input = document.querySelector('input[type=file]');
console.log(input.files) // FileList {0: File(3044232), length: 1}

三. URL

除了可以使用base64字符串作为内容的DataURI将一个文件嵌入到另外一个文档里，还可以使用URL对象。URL对象用于生成指向File对象或Blob对象的URL

静态方法：

  • URL.createObjectURL()
    该方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
var objectURL = URL.createObjectURL(blob);

blob是用来创建 URL 的 File 对象或者 Blob 对象​

  • URL.revokeObjectURL()
    该方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
window.URL.revokeObjectURL(objectURL);

objectURL是一个 DOMString，表示通过调用 URL.createObjectURL() 方法产生的 URL 对象

四. FileReader

我们知道Blob对象只是二进制数据的容器，本身并不能操作二进制，FileReader对象就是专门操作二进制数据的，FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

创建实例：

var reader = new FileReader();

方法(入参都是File或Blob对象)

  • reader.abort() 终止文件读取操作
  • reader.readAsArrayBuffer(file) 异步按字节读取文件内容，结果用ArrayBuffer对象表示
  • reader.readAsBinaryString(file) 异步按字节读取文件内容，结果为文件的二进制串
    reader.readAsDataURL(file) 异步读取文件内容，结果用data:url(即Base64格式)的字符串形式表示
  • reader.readAsText(file, encoding) 异步按字符读取文件内容，结果用字符串形式表示

事件名称

  • onabort 当读取操作被中止时调用
  • onerror 当读取操作发生错误时调用
  • onload 当读取操作成功完成时调用
  • onloadend 当读取操作完成时调用,不管是成功还是失败
  • onloadstart 当读取操作将要开始之前调用
  • onprogress 在读取数据过程中周期性调用

它们在实际场景中的一些应用

  1. 上传图片后直接显示出来，而不用先经过后台
var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            //读取完毕后输出结果
           document.getElementById("file_img").src = reader.result //显示上传的图片
           console.log(reader.result);
        }
    }
}
  1. 图片转二进制Blob
    在实际文件上传中，将用户选择的图片读取为ArrayBuffer并保存到新的Blob对象中，二进制的方式传参比直接传图片效率更高)
input.addEventListener('change', function() {
  var file = this.files[0],
      fr = new FileReader(),
      blob;
  fr.onload = function() {
      blob = new Blob([this.result]);
      var formdata = new FormData()
      formdata.append('file', blob)
  };
  fr.readAsArrayBuffer(file)
});
  1. 图片Image转Base64
function getImgToBase64(url,callback){
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    var img = new Image
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL('image/png'); //base64格式
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}
  1. Base64转为Blob、File
function base64ToBlob(base64){
    var arr = base64.split(',')
    var mime = arr[0].match(/:(.*?);/)[1]
    var bytes = atob(arr[1])      //对用base64编码过的二进制进行解码  
    var n = bytes.length
    var u8arr = new Uint8Array(n)
    while(n--){
        u8arr[n]=bytes.charCodeAt(n);   //将编码转换成Unicode编码
    }
    return new Blob([u8arr], {type: mime})
    //or: return new File(u8arr], {type:mime})  //base64转换为文件

   //以二进制的方式传参：
    var formdata = new FormData()
    formdata.append('file', new Blob([u8arr], {type: mime}))
    xhr.send(formdata)
}

作者：Polaris_llh
链接：https://www.jianshu.com/p/67702e025ede
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的:(web前端)