vue获取文件流(视频流、音频流、图片流)数据并将其回显展示

news2025/1/23 22:35:02

前言

这几天深受数据回显的折磨,级联选择器的回显还没想出怎么弄,又碰到了文件流的回显,主要第一次接触,看着一堆乱码,连是什么问题都不懂,后面通过查阅一天的资料,总结了一下方法,若有不足,请多指教。


问题描述

向后端请求音频文件,请求成功后返回给你的一种数据,而不是直接路径什么的,据说是流传输是为了安全,所以这里就需要前端进行转码了。

接口回参:
在这里插入图片描述


数据获取

如果我们在请求接口获取数据时不指定返回数据类型的话,我们获取到的可能就是一堆乱码数据。
因此我们在axios接口请求里面需要指定responseType为blob
在这里插入图片描述

打印观察后的 blob 数据
在这里插入图片描述


数据展示

获取到数据之后用对应标签进行展示,例如 audio标签 中的 src 需要直接指向 blob 数据的话是没有用的,所以应该创建一个 url 来指向的的 blob 数据,然后将 url 赋给 audio 的 src 属性。

window.URL.createObjectURL()

  1. URL: 在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。 然后,您可以轻松读取URL的已解析组成部分或对URL进行更改。若浏览器不支持URL()构造函数,则使用Window中的Window.URL属性。
  2. createObjectURL:
    createObjectURL返回一个DOMString包含一个唯一的blob链接。

这就是通过window.URL.createObjectURL(res.data);将之前音频数据转换成 blob 链接
在这里插入图片描述
最后将这个链接的属性赋值到src下就行了


补充

如果用uni-app开发的话,就在 request 里写 responseType: "arraybuffer"
在这里插入图片描述

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

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

相关文章

Axure教程-新手入门基础(小白强烈推荐!!!)

Axure教程-新手入门基础(小白推荐) 1.Axure软件介绍 Axure RP是一款专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。 Axure RP的…

Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试

💂 个人网站:【 海拥】【小霸王游戏机】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识题库&…

layui最新版本更新已全面拥抱Vue3,layui - vue是一套Vue 3.0的桌面端组件库,提供100%的layui的体验;

layui - vue目前的版本是1.4.9,目前常用的大部分组件已全部覆盖,最惊喜的地方在动画和过度组件做的比较好,应该是目前Vue组件库里面做的比较好的,Vue的动画相比于React和Angular一直比较弱,layui - vue目前做的不错,目…

前端中的BFC是什么?

BFC的概念 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 MDN给出的解释是:BFC是…

【docker基础操作命令】(一)启动命令和镜像命令

文章目录docker启动命令1. 启动docker2. 关闭docker3. 重启docker4. 查看docker运行状态5. 设置docker开机自启动6. 查看docker信息7. 查看docker的帮助文档docker镜像命令1. 显示当前docker下的所有镜像2. 从远程仓库查看指定名称的镜像3. 下载镜像到本地4. 查看镜像/容器/数据…

分布式ELK日志监控系统环境搭建

文章目录1.1为什么需要监控项目日志1.2ELK日志监控系统介绍1.3ELK的工作流程1.4ELK环境搭建1.4.1Elasticsearch的安装1.4.2Kibana的安装1.4.3Logstash的安装1.4.4数据源配置1.4.5日志监测测试1.1为什么需要监控项目日志 项目日志是记录项目运行过程中产生的事件和信息的重要工…

web前端开发和后端开发哪个难度大?

前言 因为涉及到的具体的应用的领域不同,所以说不能简单地说哪一个难,对于前端而言你会感觉到入门会非常的简单,这也是会给许多人一种错觉,前端很简单,但是只能说是在入门理解上是有利于新手的,前端在主要…

Python tkinter(GUI编程)模块最完整教程(上)

提示:下滑文章左侧可以查看目录! 1 走进tkinter世界 1.1 认识tkinter tkinter是一个GUI开发模块,是Tcl/Tk语言在Python上的接口,可以在大部分操作系统上运行。tkinter非常的简单而且好用。tkinter模块是自带的Python模块&#…

vue3.2 基础及常用方法

Vue3.2(21年8月10日)相比于Vue3新增了语法糖,减少了代码冗余 Vue3相比于Vue2,在虚拟DOM,编译, 数据代理,打包构建封面进行了优化 Vue3使用组合式API, 适合大型项目, 去除了this vue2的 beforeCreate 和 created 被新增的setup生命周期替代 vue3 使用插件: volar 配置用户代…

js中常遇到 切割截取字符串的几种方法

切割截取字符串的几种方法 1、 split() 方法用于把一个 字符串 分割成 字符串数组 ; stringObject.split(str,length)var str "123,456,789"; console.log(str.split()); // ["1", "2", "3", ",", "4&qu…

【PC端聊天功能模板】vue-elementul简单实现电脑端客服聊天功能,pc端聊天系统静态页面布局,配套websocket方案和心跳重连机制【详细注释,拿来即用】

前言 这里是给大家写了一个简单的模板来使用,可以直接复制了调调就能用。因为这个聊天也是很容易出现的功能,所以我写一个模板静态页面放在这,以后需要这个功能的时候可以不用布局了,直接复制改改。 我的代码里面有详细的注释&…

小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)

先说一下个人感觉吧,小马之前也是一直在用 Visual Studio Code 来进行开发,但随着开发需求增加,VS 所需要的插件越来越多(用过 vs code 的同学都知道,它虽可以进行各种开发语言的编写,但是需要相应的插件支…

ECharts设置x轴刻度间隔的两种方法

ECharts设置x轴刻度文字间隔的两种方法 背景 最近在写一个echarts数据看板,要在一个页面中展示多张图表,所以留给每张图表的尺寸就很小。这也就使得图表x轴的刻度文字全部挤到一起了,废话不多说,直接上图看效果。 右边的图标就…

11.定时任务定时线程池详解

3.1 新增定时任务池 11.定时任务&定时线程池详解 ​ 当我们不用任务框架时,我们想自己写一个定时任务时,我们能想起那个工具类呢?Timer ?还有吗?不知道了,下面我们要讲下ScheduledThreadPoolExecutor…

Vue图片路径问题(动态引入:绝对路径、相对路径),require动态路径问题

Vue图片路径问题&#xff08;动/静态引入&#xff1a;绝对路径、相对路径&#xff09; DEMO实例&#xff08;可快速解决问题&#xff09;: 注意&#xff1a;绝对路径方式导入的图片需要存储在 publiic 文件夹下 静态导入相对路径&#xff1a; <img src"../../asset…

Mybatis+Servlet+Mysql 整合的一个小项目:对初学者非常友好,有助于初学者很快的上手Java Web

文章目录前言为何要写&#xff1f;目录结构1 依赖配置1.1 创建一个web项目1.2 依赖需求分析1.3 pom.xml2 配置Mybatis2.1 mybatis-config.xml2.2 UserMapper.xml2.3 UserMapper.interface3 配置Tomcat4 Servlet类4.1 loginServlet014.2 registerRequest015 静态页面代码5.1 Htm…

Vue开发实例(13)之axios和mockjs的安装与使用

作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性&#xff0c;喜欢跟广大ADC一起打野升级&#xff0c;欢迎您关注&…

Vue3中 内置组件 Teleport 详解

1. 基本概念 1.1 简单理解 不管是 Vue2 还是 Vue3 中都有内置组件的存在&#xff0c;如 component 内置组件、transition 内置组件等等。内置组件就是官方给我们封装的全局组件&#xff0c;我们直接拿来用就可以了。 在 Vue3 中新增了 Teleport 内置组件&#xff0c;先来看下…

【JavaScript-数组全家福】

目录 前言 数组 1.创建 new Array数组 2.检测是否为数组 1.使用instanceof检测是否为数组 2.使用Array.isArray()来检测 3.添加删除数组方法 4.筛选数组 5.数组排序 6.数组索引方法 7.数组去重 8.数组转字符串 写在最后 前言 博主是&#x1f466;一个帅气的boy&#…

前端案例:飞机大战( js+dom 操作,代码完整,附图片素材)

目录 一、案例效果 二、实现思路 三、完整代码详细注释 四、涉及要点 五、案例素材 一、案例效果 二、实现思路 创建游戏背景板&#xff1b;创建我方战机&#xff0c;鼠标进入游戏面板后其随鼠标轨迹运动&#xff1b; onmousemove创建子弹&#xff0c;让子弹周期性的在战…