博客地址:https://ainyi.com/88

对于 Blob,前端开发中可能比较少遇到;数据库中可使用 Blob 概念,例如 Mysql 存储二进制数据的类型就是 Blob,也就是说图片可存储于数据库中,以二进制格式存储

我在之前有篇博客说到 Blob:利用 Blob 处理 Node 层返回的二进制文件流字符串并下载文件
这里我利用 Blob 实现文件拆分再合并下载的方法,算是第一次使用


我们最常见的应该是 Blob URL 技术,文件上传的预览、视频播放的 src,均是采用这种技术实现

关于 Blob-LMLPHP

关于 Blob-LMLPHP

Blob URL 就是以 blob: 开头的一段地址,指向的是一个二进制数据
使用 URL.createObjectURL(blob) 方法生成,参数为 Blob 对象

这个 Blob URL 是可以直接访问的;需要注意的是这个 URL 的生效时间,等同于网页的存在时间,一旦网页刷新或关闭,这个 Blob URL 就失效

构造函数

Blob(blobParts[, options])

返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成

参数说明:
blobParts:数组类型,数组中的每一项连接起来构成 Blob 对象的数据,数组中的每项元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString

options:可选参数;字典格式类型,可以指定如下两个属性:

  1. type:放入到 blob 中的数组内容的 MIME 类型 MIME 参考手册
  2. endings:用于指定包含行结束符\n的字符串如何被写入;可设置值:native、transparent;native:表示行结束符会被更改为适合宿主操作系统文件系统的换行符; transparent:表示会保持blob中保存的结束符不变;默认值为 transparent;

使用场景

介绍三种使用场景

  1. 二进制流文件下载
  2. 图片预览
  3. 视频加载

二进制流文件下载

// 获取文件二进制流 content
const content = await downloadContract(params)

// 再利用 Buffer 转为对象
const buf = Buffer.from(content, 'binary')

// 生成 Blob 对象,type 类型设置为 pdf 的 MIME 类型
const blob = new Blob([buf], {type: 'application/pdf'});

// 获取 Blob URL,可赋值到 a 标签 href 属性进行下载
const url = URL.createObjectURL(blob)

通过 Blob 生成文件、利用 Blob URL 获取下载链接,这样就实现后端返回二进制格式的文件进行合并再下载

图片预览

较为简单,获取文件对象后,再通过 createObjectURL 方法得到 Blob URL
最后直接赋值到 img 标签的 src 属性即可

<input id="upload" type="file" />
<img id="preview" src="" alt="预览"/>
const upload = document.querySelector('#upload')
const preview = document.querySelector('#preview')

upload.onchange = function() {
  const file = upload.files[0] // File 对象
  const src = URL.createObjectURL(file)
  preview.src = src
}

视频加载

视频地址,不同于上面的 input,可以直接拿到 File 对象
只有一个视频地址怎么能将这个 URL 变成我们想要的 Blob URL 形式呢

从 方法来看,首先要拿到存储这个视频原始数据的 Blob 对象

平时我们请求接口可以使用 axios / ajax / xhr 或 fetch,请求一个服务端地址可以返回我们相应的数据,那如果我们去请求一个图片或视频地址会返回什么?应当是返回图片和视频的数据,这种情况只要设置正确才能拿到我们想要的格式数据

// responseType 参数如下:
// text 字符串;blob Blob对象;arraybuffer ArrayBuffer 对象
function ajax(url, cb) {
  const xhr = new XMLHttpRequest()
  xhr.open('get', url)
  xhr.responseType = 'blob'
  xhr.onload = function() {
    cb(xhr.response)
  }
  xhr.send()
}

上面请求返回一个 Blob 对象,接下来只要然后通过 createObjectURL 生成 Blob URL 赋值给视频的 src 属性就可以了

ajax('video.mp4', function(res){
  const src = URL.createObjectURL(res)
  video.src = src
})

大文件分片上传

最近看到一篇文章:大规格文件的上传优化

里面讲的是利用 Blob 实现文件分片上传,对于大文件上传有很好的效果

其核心思想是,使用 File.slice() 方法进行文件分片;File 对象是继承 Blob 对象的,因此 File 对象也有 slice 方法

Blob.slice([start[, end[, contentType]]])

start 可选
这个参数代表 Blob 里的下标,表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。如果你传入的是一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算
举例来说: -10 将会是 Blob 的倒数第十个字节。它的默认值是0, 如果你传入的start的长度大于源 Blob 的长度,那么返回的将会是一个长度为0并且不包含任何数据的一个 Blob 对象

end 可选
这个参数代表的是 Blob 的一个下标,这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。如果你传入了一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算
举例来说: -10 将会是 Blob 的倒数第十个字节。它的默认值就是它的原始长度(size)

contentType 可选
给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串


文件分片方法
定义每一个分片文件的大小变量为 chunkSize,通过文件大小 FileSize 和分片大小 chunkSize 得到分片数量 chunks,使用 for 循环和 file.slice() 方法对文件进行分片,序号为 0 - n,和已上传的切片列表做比对,得到所有未上传的分片,push 到请求列表 requestList

上传进度
监听原生 Javascript 的 XMLHttpRequest 的 progress 事件,这个事件会返回文件已上传的大小和总大小,可实现上传进度的变化

博客地址:https://ainyi.com/88

05-18 02:12