阅读 873

Blob、ArrayBuffer、File、FileReader和FormData的区别

在工作中会经常遇到操作文件的时候,最常见的是通过input标签获取File文件,他和Blob等有什么区别不太清楚,也没具体了解过,所以有必要挨个明确一下这些名词到底是什么

分类

  • Blob、ArrayBuffer、File可以归为一类,它们都是数据;
  • FileReader算是一种工具,用来读取数据;
  • FormData可以看做是一个应用数据的场景。

Blob

概念解释

全称是binary large object,二进制大文件对象,非Javascript特有,计算机通用对象,MDN上解释是,一个Blob对象就是一个包含有只读原始数据的类文件对象,通俗讲就是不可修改的二进制文件

通过构造函数创建Blob对象

var aBlob = new Blob( array, options );
// array:一堆数据构成的数组 
//options:设置一些属性,主要是type属性
复制代码

Blob对象的属性

  • size:数据的字节大小(只读)
  • type:数据的MIME类型,例如'image/jpeg'(只读) (MIME:描述消息内容类型的因特网标准)

Blob对象的方法

Blob对象只有slice方法,对文件分割

Blob.slice(start, end ,contentType)
//start:分割起始点
//end: 分割终点
//contentType:新的MIME类型
复制代码

File

概念解释

File就是文件,继承自Blob,也是二进制对象,也有自己特有的属性和方法,通常用在<input type="file">选择的FileList对象,或者是使用拖拽操作产生的的DataTransfer对象。

构造函数创建File对象

var myFile = new File(array, name,options);
// array:一堆数据构成的数组 
//name:文件名
//options:设置一些属性,type属性、lastModified
复制代码

File对象属性

  • name:文件名
  • size:文件大小
  • lastModified :最后修改时间(时间戳)
  • lastModifiedDate:最后修改时间Data对象
  • type:MIME类型

File对象方法 继承自Blobslice方法

Blob.slice([start, end, contentType)
//start:分割起始点
//end: 分割终点
//contentType:新的MIME类型
复制代码

ArrayBuffer

概念解释

ArrayBuffer是内存上一段二进制数据,我们可以借助工具TypeArray、DataView对它进行读写

Blob与ArrayBuffer的关系

  • ArrayBuffer是底层二进制数据,可以借助工具进行读写,而Blob是对底层二进制数据的封装,我们拿到的就是一个整体,能够读取他的大小,类型,但是不能看到细节
  • Blob可以接受一个ArrayBuffer作为参数生成一个Blob对象,此行为就相当于对ArrayBuffer数据做一个封装,之后就是以整体的形式展现了

-Blob作为一个整体文件,适合用于传输;而只有需要关注细节(比如要修改某一段数据时),才需要用到ArrayBuffer

文件互相转换

File文件转换为Blob对象

let aBlob = new Blob([file], {type: file.type})
复制代码

Blob转换为File

let files = new window.File([this.blob], file.name, {type: file.type})
复制代码

File/Blob文件转换为base64

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}

复制代码

图片url转换为base64

img2base64(imgUrl) {
      let image = new Image()
      image.src = imgUrl
      return new Promise((resolve) => {
        image.onload = () => {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          var context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          let dataUrl = canvas.toDataURL('image/png')
          resolve(dataUrl)
        }
      })
    },
复制代码

base64转Blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
复制代码

base64转File

 function dataURLtoFile(dataurl, filename) {//将base64转换为文件
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    }
复制代码

FileReader

通过fileReader可以将Blob、File读取为不同的格式

  • FileReader.readAsDataURL(blob将二进制数据读取并编码为Base64格式
  • FileReader.readAsText(blob)就是将二进制数据读取并编码为字符串形式

FormData

使用FormData我们可以异步上传一个二进制文件,而这个二进制文件,就是我们上面讲的Blob对象

文章分类
前端
文章标签