请求响应什么情况要使用 responseType: ‘blob‘

在前端开发中,使用 responseType: ‘blob’ 的主要情况是当你向服务器发起请求,并且期望响应返回的是一个二进制数据(Blob 对象)时。

典型应用场景包括:
1.文件下载: 当你需要从服务器下载文件时,比如下载图片、PDF、Excel 文件等,服务器返回的响应通常是二进制数据。此时就需要将 responseType 设置为 ‘blob’,以便直接处理这些二进制数据或者将其作为文件下载到本地。

const url = 'https://example.com/download-file';
fetch(url, {method: 'GET',responseType: 'blob' // 请求的响应类型为二进制数据
})
.then(response => {// 处理文件下载const blob = response.blob();const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'file.pdf'; // 设置下载文件名document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url);
})
.catch(error => console.error('文件下载失败', error));

2.音视频播放: 当你需要从服务器获取音频或视频文件时,也需要将 responseType 设置为 ‘blob’,然后可以将 Blob 对象传递给 或 元素的 src 属性,从而实现播放。

const url = 'https://example.com/video.mp4';
fetch(url, {method: 'GET',responseType: 'blob' // 请求的响应类型为二进制数据
})
.then(response => {// 处理音视频播放const blob = response.blob();const video = document.getElementById('myVideo');video.src = URL.createObjectURL(blob);
})
.catch(error => console.error('音视频播放失败', error));

3.上传文件预览: 在上传文件之前,有时需要先预览文件内容(例如图片),此时需要将 responseType 设置为 ‘blob’,然后使用 FileReader 对象读取 Blob 数据进行预览。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {const file = event.target.files[0];const reader = new FileReader();reader.onload = function(event) {const imageUrl = event.target.result;const img = document.createElement('img');img.src = imageUrl;document.body.appendChild(img);};reader.readAsDataURL(file);
});

总结来说,当需要处理从服务器获取的二进制数据(如文件、音视频等)时,使用 responseType: ‘blob’ 可以直接获取到原始的二进制数据,方便后续的处理和使用。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webpack源码深入--- webpack的编译主流程

webpack5的编译主流程 根据watch选项调用compiler.watch或者是compiler.run()方法 try {const { compiler, watch, watchOptions } create();if (watch) {compiler.watch(watchOptions, callback);} else {compiler.run((err, stats) > {compiler.close(err2 > {callb…

Pip install 和Conda install 的区别和使用场景

Pip install 和Conda install 的区别和使用场景

Echarts公共方法

Vue引入Echarts install 1.安装Echartsnpm install echarts --save 2.项目全局引入形式--#main.js 全局引入形式import * as echarts from "echarts"Vue.prototype.$echarts echarts 公共方法JS /*** author: wangjie* description: 通用echarts图表封装* date: …

【最新】2024年全球汽车零部件供应商百强榜,15家中企上榜!

6月23日,《美国汽车新闻》(Automotive News)重磅发布了2024年全球汽车零部件供应商百强榜。来自中国的动力电池企业宁德时代挤进了前四,中国企业一共上榜15家,较去年多了两家。国轩高科和三花零件为新进榜单的中企。 …

WPF自定义控件,实现含有箭头的文本或内容控件

文章目录 背景效果预览方案设计分析基本布局添加控件自定义属性添加属性值监听获取点数据 全部代码HorizontalLineContent.xamlHorizontalLineContent.xaml.csDirectionAlignment.csContentDirectionAlignment.cs 使用方法 背景 因为项目开发需要,要在WPF上绘制TCP…

【neo4j图数据库】入门实践篇

探索数据之间的奥秘:Neo4j图数据库引领新纪元 在数字化浪潮汹涌的今天,数据已成为企业最宝贵的资产之一。然而,随着数据量的爆炸性增长和数据关系的日益复杂,传统的关系型数据库在处理诸如社交网络、推荐系统、生物信息学等高度互…

代码随想录算法训练营第四十一天| 322. 零钱兑换、279.完全平方数、139.单词拆分

322. 零钱兑换 题目链接:322. 零钱兑换 文档讲解:代码随想录 状态:能想到凑足总额为j - coins[i]的最少个数为dp[j - coins[i]],但没想到加上一个钱币coins[i]即dp[j - coins[i]] 1就是dp[j](考虑coins[i]&#xff09…

IDEA 好用的插件,必备的插件

1. GitToolBox 菜单栏显示git分支信息 2.MyBatisx 快速定位找到sql的xml文件 3.RestfulToolkit-fix 快速定位接口的插件 默认快捷键: CtrlAltN 4.EasyCamelQSM 字符串转驼峰 默认快捷键: Ctrl Alt Q 5.Maven Helper 检查maven冲突,图形化展示maven依赖的插…

C#面:如何把一个array复制到arrayist里

要将一个数组复制到ArrayList中,可以使用ArrayList的AddRange方法。以下是一个示例代码: int[] array { 1, 2, 3, 4, 5 }; ArrayList arrayList new ArrayList(); arrayList.AddRange(array); 在上面的代码中,我们首先创建了一个整数类型…

python实现excel数据自动统计

读取数据:首先,使用pandas读取Excel文件中的数据。 分组:使用groupby根据指定的分组列对数据进行分组。 统计次数:自动统计每组的指定列中每个唯一值出现的次数,和统计满足特定条件的计数 保存:将需要的…

Conan安装与C++第三方环境配置保姆级图文教程(附速查字典)

目录 1 什么是Conan?2 Conan安装与配置3 Conan的常见操作3.1 搜索指定包3.2 安装指定包3.3 本地包管理3.4 查看项目依赖 4 Conan构建项目案例 1 什么是Conan? Conan是一个开源的C/C包管理器,用于管理和构建C/C项目所需的依赖库。传统上&…

【启明智显分享】2.8寸触摸串口屏SC05 Plus应用于智能血压计

2.8寸SC05 Plus串口触摸屏,带WIFI/蓝牙 我国高血压流行病调查显示,成人高血压患病率为27.9%、知晓率为46.9%、治疗率为40.7%、控制率为15.3%。由此可见高血压的患病率高,但知晓率和治疗率低&…

【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(1)

👨‍💻个人主页:开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…

高危行业的安全守护者,顶坚防爆手机无惧挑战

高危行业的安全守护者,防爆手机以卓越性能,无惧极端挑战,为每一位前线工作者筑起坚不可摧的安全防线。石油勘探的深邃海洋、化工生产的复杂车间、矿山的幽深隧道……这些高危行业中,每一步都需谨慎前行,每一刻都需安全…

MySQL表字段设置默认值的两种方法

在java代码中给mysql必备字段设置默认值 第一种方式 mybatisplus提供的TableField注解直接可以解决时间默认值的问题 TableField注解配合FieldFill 根据新增修改不同操作设置默认值 // 字段添加填充内容 ApiModelProperty(value "创建时间") JsonFormat(shape …

C++之强制转换

在C中,类型强制转换有四种主要的形式,分别是:static_cast、dynamic_cast、const_cast和reinterpret_cast。每种类型转换都有其特定的用途和限制。 static_cast: 主要用于常见的类型转换,如数值类型之间的转换,父子类指…

基于springboot的校园商铺管理系统

功能结构图: 实现图: 后台功能: 商品管理 公告管理 前台页面 详情 订单 我的订单

SciencePub学术刊源 | 7月SCI/SSCI/EI/CNKI刊源表已更新!(内含TOP及CCF推荐)

【SciencePub学术】我处SciencePub学术2024年7月SCI/SSCI/EI/CNKI刊源表已更新!内含多本中科院TOP、CCF推荐以及进展超顺的优质期刊,最快1-3个月录用! 计算机领域重点SCI 环境地质化学领域重点SCI 生物医学领域重点SCI 数学材料领域重点SCI 各…

【CH32V305FBP6】USBD 初始化分析

文章目录 前言实现时钟初始化分析USBD 设备初始化分析端点初始化分析 前言 分析 V305 USBD 初始化程序。 实现 初始化 /* main.c */ int main(void) {NVIC_PriorityGroupConfig(NVIC_PriorityGroup_4);SystemCoreClockUpdate();// USB 初始化USBHS_RCC_Init();USBHS_Device…

[AIGC] Spring Boot 整合 ClickHouse:优雅使用的指南

在大数据处理的场景中,ClickHouse的极高效率和强大功能使其在众多数据库系统中脱领而出。而Spring Boot作为流行的Java框架,与ClickHouse的结合,将使得数据分析如虎添翼。 文章目录 1. 添加依赖2. 配置连接3. 创建连接工厂4. 执行SQL操作 接下…