一篇文章理解前端中的 File 和 Blob

概述: js处理文件、二进制数据和数据转换的时候,提供了一些API和对象,例如:File、Blob、FileReader、ArraryBuffer、Base64、Object URL 和 DataURL。现在主要介绍File和Blob这两个对象。

1.Blob介绍

在js中,Blob(Binary Large Object)对象用于表示不可变的原始二进制数据,主要用于存储文件、图片、视频和音频等各种类型数据。 Blob提供一种高效方式操作数据文件,不需要将数据都加载到内存中,有利于处理二进制数据或大型文件。

可以使用 new Blob() 构造函数创建一个 Blob 对象:

const blob = new Blob(blobParts, options);
  • blobParts: 是一个包含将被放入 Blob 对象中的数据的数组,可以是字符串、数组缓冲区(ArrayBuffer)、TypedArray、Blob 对象等。

  • options: 一个可选的对象,可以设置 type(MIME 类型)和 endings(用于表示换行符)。

例如:

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
 

Blob 对象主要有以下几个属性:

  1. size: 返回 Blob 对象的大小(以字节为单位)。

  2. type: 返回 Blob 对象的 MIME 类型。

Blob 对象提供了一些常用的方法来操作二进制数据。

例如:slice([start], [end], [contentType])、text()、arrayBuffer() 和 stream()。

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

    该方法用于从 Blob 中截取一部分数据并返回一个新的 Blob 对象。

    参数 start 和 end 表示提取的字节范围,contentType 设置提取部分的 MIME 类型。

    const blob = new Blob(["Hello, world!"], { type: "text/plain" });
    const partialBlob_1 = blob.slice(0, 5, );
    const partialBlob_2 = blob.slice(0, 5, "text/plain");

  2. text()

    该方法将 Blob 的内容读取为文本字符串。它返回一个 Promise,解析为文本数据。

    const blob = new Blob(["Hello, world!"], { type: "text/plain" });
    blob.text().then((text) => {
      console.log(text); // 输出 "Hello, world!"
    });

  3. arrayBuffer()
    该方法将 Blob 的内容读取为 ArrayBuffer 对象,适合处理二进制数据。
    它返回一个 Promise,解析为 ArrayBuffer 数据。

    const blob = new Blob(["Hello, world!"], { type: "text/plain" });
    blob.arrayBuffer().then((buffer) => {
      console.log(buffer);
    });

  4. stream()

    该方法将 Blob 的数据作为一个 ReadableStream 返回,允许以流的方式处理数据,适合处理大文件。

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const stream = blob.stream();

Blob的应用场景

Blob 对象的应用场景很多,尤其是在 前端Web 应用中处理文件、图片或视频等二进制数据时,有以下场景。

  1. 生成文件下载

    通过 Blob 创建文件并生成下载链接供用户下载文件。

    const blob = new Blob(["test文件内容"], { type: "text/plain" });
    const url = URL.createObjectURL(blob); // 创建一个 Blob URL
    const a = document.createElement("a");
    a.href = url;
    a.download = "test.txt";
    a.click();
    URL.revokeObjectURL(url); // 销毁 URL 对象

    运行代码后会在浏览器中下载一个test.txt的文件

  2. 上传文件
    通过 FormData 对象将 Blob 作为文件上传到服务器:

    const formData = new FormData();
    formData.append("file", blob, "example.txt"); //formData.append(name, blob, fileName)
    ​
    fetch("/upload", {
      method: "POST",
      body: formData,
    }).then((response) => {
      console.log("文件成功上传了");
    });
    ​


  3. 读取图片或其他文件
    通过 FileReader API 可以将 Blob 对象读取为不同的数据格式。 例如可以将 Blob 读取为图片文件格式。

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <input type="file" id="fileInput" accept="image/*" />
    ​
        <div id="imageContainer"></div>
        <script>
          const fileInput = document.getElementById("fileInput");
    ​
          const imageContainer = document.getElementById("imageContainer");
            
          fileInput.addEventListener("change", function (event) {
            const file = event.target.files[0];
            // startsWith() 方法用于检测字符串是否以指定的子字符串开始。判断是否上传的文件是图片类型
            if (file && file.type.startsWith("image/")) { 
              const reader = new FileReader();
            // 读取完成时触发
              reader.onload = function (e) {
               // 设置图片样式   
                const img = document.createElement("img");
                img.src = e.target.result;
                img.style.maxWidth = "500px";
                img.style.margin = "10px";
                imageContainer.innerHTML = "";
                imageContainer.appendChild(img);
              };
             //获取API异步读取的文件数据,另存为数据URL
              reader.readAsDataURL(file);
            } else {
              alert("请选择一个有效的图片文件。");
            }
          });
        </script>
      </body>
    </html>
    ​


  4. Blob 和 Base64

    有时需要将 Blob 转换为 Base64 编码的数据(例如用于图像的显示或传输)。可以通过 FileReader 来实现。

const reader = new FileReader();
reader.onloadend = function () {
  const base64data = reader.result;
  console.log(base64data); // 输出 base64 编码的数据
};
reader.readAsDataURL(blob); // 将blob读取为dataurl

2.File介绍

File 是js中代表文件的数据结构,继承自Blob对象,包含文件的元数据(文件名、文件大小、类型等)。 File 对象可以通过 <input type="file"> 选择文件时创建,也可以使用 js构造函数创建。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="myFileInput" />
    <script>
    document.getElementById("myFileInput").addEventListener("change", (event) => {
      const file = event.target.files[0];
      console.log("file-->:", file);
      console.log("文件名:", file.name);
      console.log("文件类型:", file.type);
      console.log("文件大小:", file.size);
    });
    </script>
  </body>
</html>
​

也可以使用 File 的方式获取用户上传的文件,手动创建 File 对象:

// new File(文件内容,文件名,文件格式)
const file = new File(["Hello, world!"], "hello-world.txt", {
  type: "text/plain",
});
​
console.log(file);

 

File 对象继承了 Blob 对象的方法,因此可以使用一些 Blob 对象的方法来。

  1. file.slice()

    // 获取文件的前 10 个字节
    const blob = file.slice(0, 10);
  2. file.text()

    file.text().then((text) => {
      // 输出文件的文本内容
      console.log(text); 
    });
  3. file.arrayBuffer()

    file.arrayBuffer().then((buffer) => {
      // 输出文件的 ArrayBuffer
      console.log(buffer); 
    });
    ​
  4. file.stream()

    const stream = file.stream();

3.总结

Blob 是二进制数据,它可以存储任何类型的数据,但不具有文件的元数据(如文件名、最后修改时间等)。

File 是 Blob 的子类,File 对象除了具有 Blob 的所有属性和方法之外,还包含文件的元数据(如文件名和修改日期),

File 对象也就是带有文件信息的 Blob。

在文件上传和二进制数据处理的场景中被广泛使用。Blob 更加通用,而 File 更专注于与文件系统的交互

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });
console.log(file instanceof Blob); // true

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/907974.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

react使用Fullcalendar

前言&#xff1a; 最近在做项目时&#xff0c;遇到了需要用日历的项目。一开始考虑使用antd的日历组件。后来 调研技术库&#xff0c;发现了fullcalendar 库。经过对比 fullcalendar 更强大&#xff0c;更灵活。 其实 antd的日历组件 也不错&#xff0c;简单的需求用他也行。…

SpringBoot应用:精品在线试题库的设计与实现

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Sprin…

【数据分享】2024年我国省市县三级的休闲娱乐设施数量(免费获取/18类设施/Excel/Shp格式)

KTV、棋牌室、音乐厅等休闲服务设施的配置情况是一个城市公共基础设施完善程度的重要体现&#xff0c;一个城市休闲服务设施种类越丰富&#xff0c;数量越多&#xff0c;通常能表示这个城市的公共服务水平越高&#xff01; 本次我们为大家带来的是我国各省份、各地级市、各区县…

Git在码云上的使用指南:从安装到推送远程仓库

目录 前言&#xff1a; 1、git的安装 1.1.Linux-centos环境下安装 1.2.Linux-ubuntu环境下安装 2.创建Git本地仓库 3.配置Git 4.认识⼯作区、暂存区、版本库 5.添加文件 5.1.git命令 5.2.commit命令 6.远程操作 6.1.新建远程仓库 6.2.克隆远程仓库&#xff1a; 6…

11.Node.js API接口

八、API接口 8.1 json-server工具 1&#xff09;安装json-server npm i -g json-server2)示例 //students.json {"student":[{"id":1,"name":"sally","age":18,"gender":"女"},{"id":2,&…

Flink本地模式安装详解

1. 概述 Apache Flink 支持多种安装和运行模式&#xff0c;主要可以分为以下几种&#xff1a; Local&#xff08;本地&#xff09;模式&#xff1a; 这种模式主要用于学习和测试&#xff0c;所有的 Flink 组件都会在同一个 JVM 进程中运行。这种方式非常适合初学者了解 Flink…

LabVIEW配电产品精度测试系统

开发了一种基于LabVIEW平台的配电产品精度测试系统&#xff0c;通过自动化测试流程实现更高的测试准确性与效率。系统采用串口和TCP通信技术&#xff0c;与多功能交流采样变送器和配电设备无缝数据交互&#xff0c;提升了测试工作的可靠性和一致性。 一、项目背景 在配电产品…

0-ARM Linux驱动开发-字符设备

一、字符设备概述 Linux 系统中&#xff0c;设备被分为字符设备、块设备和网络设备等。字符设备以字节流的方式进行数据传输&#xff0c;数据的访问是按顺序的&#xff0c;一个字节一个字节地进行读取和写入操作&#xff0c;没有缓冲区。例如&#xff0c;终端&#xff08;/dev…

flink 内存配置(一):设置Flink进程内存

Apache Flink通过严格控制各个组件的内存使用&#xff0c;在JVM之上提供了高效的工作负载。虽然Flink社区努力为所有配置提供合理的默认值&#xff0c;但由于用户部署在Flink上的应用范围很广&#xff0c;这并不总是可行的。为了给用户提供最大的生产价值&#xff0c;Flink支持…

Android启动流程_Zygote阶段

前言 上一篇文档中我们描述了 Android 启动中的 init 启动部分&#xff0c;本片文档将会继续 Android 启动流程的逻辑&#xff0c;继续梳理 Zygote 部分功能。 说明框架 对于 Zygote 进程&#xff0c;要从以下框架说明&#xff1a; 第一点&#xff0c;编译&#xff0c;zygo…

记本地第一次运行seatunnel示例项目

前置 静态源码编译通过&#xff1a;https://blog.csdn.net/u011924665/article/details/143372464 参考 seatunnel官方的开发环境搭建文档&#xff1a;https://seatunnel.incubator.apache.org/zh-CN/docs/2.3.5/contribution/setup 安装scala 下载scala 去官网下载&…

用流量策略做多出口实验

一、拓扑&#xff1a; 二、配置过程&#xff1a; 1、配置 IP 地址&#xff0c;配置动态路由协议 OSPF 2、AR2 上&#xff0c;配置高级 ACL&#xff0c;允许 ospf 流量、1 到 6、2 到 8、deny 所有 3、写流分类&#xff0c;抓取流量特征 4、写流行为&#xff0c;配置流量动作 5、…

ps技巧,来源于网络

魔棒工具 选个颜色之后 ctrlj复制图层 完成

【论文阅读】Associative Alignment for Few-shot Image Classification

用于小样本图像分类的关联对齐 引用&#xff1a;Afrasiyabi A, Lalonde J F, Gagn C. Associative alignment for few-shot image classification[C]//Computer Vision–ECCV 2020: 16th European Conference, Glasgow, UK, August 23–28, 2020, Proceedings, Part V 16. Spri…

《TCP/IP网络编程》学习笔记 | Chapter 3:地址族与数据序列

《TCP/IP网络编程》学习笔记 | Chapter 3&#xff1a;地址族与数据序列 《TCP/IP网络编程》学习笔记 | Chapter 3&#xff1a;地址族与数据序列分配给套接字的IP地址和端口号网络地址网络地址分类和主机地址边界用于区分套接字的端口号数据传输过程示例 地址信息的表示表示IPv4…

Android Studio 中的Gemini 推出更多人工智能开发功能

谷歌公司&#xff08;Google LLC&#xff09;今天发布了由其人工智能模型 “双子座”&#xff08;Gemini&#xff09;驱动的Android Studio的更多功能。 Android Studio中的 "双子座 "作为Android Studio&#xff08;一种软件编辑器&#xff09;的人工智能升级版于今…

基于物联网的户外环境检测装置教学文章

引言 随着物联网&#xff08;IoT&#xff09;技术的发展&#xff0c;越来越多的应用被广泛研究和应用于我们的日常生活中。户外环境检测装置是一种利用传感器、网络连接和数据分析技术&#xff0c;监测和分析环境数据&#xff08;如温度、湿度、空气质量等&#xff09;的设备。…

Javaweb梳理3——SQL概述+DDL语句1

Javaweb梳理3——SQL概述DDL语句1 Javaweb梳理3——SQL概述DDL语句13.1 SQL简介3.2 通用语法3.3 SQL分类3.4 DDL:操作数据库3.4.1 查询数据库3.4.2 创建数据库3.4.3 删除数据库3.4.4 使用数据库 Javaweb梳理3——SQL概述DDL语句1 3.1 SQL简介 英文&#xff1a;Structured Que…

【MWorks】Ubuntu 系统搭建

升级 Ubuntu系统 sudo apt-get update sudo apt-get upgrade安装流程 sudo chmod x 路径/文件.run安装 sudo 路径/文件.run安装过程中两个选项都填 y 打开安装对应的文件夹 运行 syslab.sh 文件&#xff0c;运行结束后&#xff0c;就可以在左上角开始搜索到syslab了。

Linux Qt 6安装Oracle QOCI SQL Driver插件(适用WSL)

本文参考 QOCI for the Oracle Call Interface (OCI)。 除一般的 Linux 系统外&#xff0c;本文也适用于 WSL 2。 在开始之前&#xff0c;如果没有安装 QOCI 插件&#xff0c;则试图链接 Oracle 数据库时会报错&#xff1a; Failed to create wl_display (No such file or dire…