耀极客论坛

 找回密码
 立即注册
查看: 495|回复: 0

Javascript File和Blob详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 02:28:25 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了Javascript File和Blob,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助


File()
  File() 构造器创建新的 File 对象实例。


语法
  1. var myFile = new File(bits, name[, options]);
复制代码

参数
  bits

  一个包含ArrayBuffer,ArrayBufferView,Blob,或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
  name

  USVString,表示文件名称,或者文件路径。
  options 可选

  选项对象,包含文件的可选属性。可用的选项如下:
       
  • type: DOMString,表示将要放到文件中的内容的 MIME 类型。默认值为 “” 。   
  • lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为 Date.now()。


示例
  1. var file = new File(["my name"], "infoTxt", {
  2.   type: "text/plain",
  3. });
复制代码
Blob()
  Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
  Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件,同时 Blob 对象的API也被列在 File 接口中。
  要从其他非blob对象和数据构造一个 Blob,请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob,请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象,请参阅 File 文档。
语法
  1. var aBlob = new Blob( array, options );
复制代码
  返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
参数
       
  • array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。   
  • options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:
              
    • type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型。        
    • endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 “transparent”,代表会保持blob中保存的结束符不变   
       

属性
  Blob.size 只读

  Blob 对象中所包含数据的大小(字节)。
  Blob.type 只读

  一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。

方法
  1. Blob.slice([start[, end[, contentType]]])
复制代码
  返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。
  1. Blob.stream()
复制代码
  返回一个能读取blob内容的 ReadableStream。
  1. Blob.text()
复制代码
  返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
  1. Blob.arrayBuffer()
复制代码
  返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer
示例
  1. const aFileParts = ['‹a id="a">‹b id="b">hey!‹/b>‹/a>']; // 一个包含DOMString的数组
  2. const oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob
  3. oMyBlob.size // 32
  4. oMyBlob.type // 'text/html'
复制代码
  Blob() 构造函数允许通过其它对象创建 Blob 对象。比如,用字符串构建一个 blob:
  1. var debug = {hello: "world"};
  2. var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
复制代码
  使用 Blob 创建一个指向类型化数组的URL
  1. const imgBlob = fetchedImgData(); // 通过接口返回的图片资源,设置返回的responseType为blob
  2. const blob = new Blob([imgBlob], {type: 'image/png' }); // 传入一个合适的 MIME 类型
  3. const url = URL.createObjectURL(blob);
  4. // 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
  5. // 你可以像使用普通 URL 那样使用它,比如用在 img.src 上。
复制代码
  从 Blob 中提取数据

  一种从Blob中读取内容的方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取:
  1. const reader = new FileReader();
  2. reader.readAsArrayBuffer(blob);
  3. reader.addEventListener("load ", function(readRes) {
  4.    // readRes.target.result 转化为arrayBuffer的 blob
  5. });
复制代码
  另一种读取Blob中内容的方式是使用Response对象。下述代码将Blob中的内容读取为文本:
  1. var text = await new Response(blob).text();
复制代码
  通过使用 FileReader 的其它方法可以把 Blob 读取为字符串或者数据URL。

总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 18:45 , Processed in 0.065504 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表