当前位置: 首页 > news >正文

使用【Blob、Base64】两种方式显示【文本、图片、视频】 使用 video 组件播放视频

Blob 显示

Blob 对象的类型是由 MIME 类型(Multipurpose Internet Mail Extensions)来确定的。MIME 类型是一种标准,用于表示文档、图像、音频、视频等多媒体文件的类型。以下是一些常见的 Blob 对象类型:

  • text/plain:纯文本文件。
  • text/html:HTML文件。
  • text/xml:XML文件。
  • image/png:PNG格式的图像文件。
  • image/jpeg:JPEG格式的图像文件。
  • image/gif:GIF格式的图像文件。
  • audio/mpeg:MP3格式的音频文件。
  • video/mp4:MP4格式的视频文件。

文本显示

Blob(Binary Large Object)对象表示一个不可变的、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

new Blob([text], {type: 'text/plain'}) 来创建一个包含字符串"测试 blog 文字显示文本信息"的 Blob 对象。这个Blob对象的MIME类型是 “text/plain” ,表示它包含纯文本数据。

显示文字,使用 blob.text() 将其转化为文本格式

<script setup>
import {ref} from 'vue';
import axios from 'axios';let text = '测试 blog 文字显示文本信息';
let blob = new Blob([text], {type: 'text/plain'});
let blobText = ref('');blob.text().then(res => {console.log('text', res);blobText.value = res;
});
</script><template><main><div>{{ blobText }}</div></main>
</template>

文本显示

image-20231011171349538

图片显示

要预览 Blob 对象中的图片,可以使用 JavaScript 中的 URL.createObjectURL() 方法。这个方法将 Blob 对象转换为一个 URL,然后可以将这个 URL 赋值给 img 元素的 src 属性

在发送请求是要注明参数 responseType: 'blob'

<script setup>
import {ref} from 'vue';
import axios from 'axios';let imgSrc = ref('');
axios.get('/api/minio/download', {params: {'fileName': '1.jpg'},responseType: 'blob'}).then(res => {// 二进制文件let fileBinaryData = res.data;const blob = new Blob([fileBinaryData], {type: 'image/jpg'});const url = window.URL.createObjectURL(blob);console.log('url', url); // 输出 url blob:http://127.0.0.1:5173/7328a00c-57e0-46c6-b508-29c5a5ce0c7fimgSrc.value = url;});</script><template><main><div>{{ blobText }}</div><a-image:width="200":src="imgSrc"/></main>
</template>

图片显示出来了

image-20231011171216986

Base64 显示

Base64 是一种将二进制数据转换成可打印字符的编码方式。Base64 的底层原理是将 3 个字节的二进制数据转换为 4 个字节的打印字符,每个可打印字符对应 6 个二进制位

简单讲就是,把乱码不可读的二进制转为可读字符

二进制流显示

image-20231011194942347

Blob 转 Base64

如果要二进制转 Base64,就先把二进制流转成 Blob,再转成 Base64

// blob 转 base64
const blob2Base64 = (blob) => {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = () => resolve(reader.result);reader.onerror = (error) => reject(error);});
};

base64 结果显示

image-20231011194859883

Base64 显示图片

使用 base64 赋值给图片的 src 也可以显示出来

image-20231011195306481

播放视频

原生播放

http://localhost:7100//api/minio/download?fileName=demo-mp4.mp4 为视频请求地址

<video width="1120" height="540" controls="controls" id="video" preload="auto"     ><source src="http://localhost:7100//api/minio/download?fileName=demo-mp4.mp4"   type="video/mp4">
</video>

image-20231011190322748

使用组件播放

使用 vue3-video-play 播放,功能会比较多

npm 安装

npm i vue3-video-play --save

局部使用

import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue-video-play'

全局使用

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)import vue3videoPlay from 'vue3-video-play' 
import 'vue3-video-play/dist/style.css'
app.use(vue3videoPlay)app.mount('#app')

方案一(直接请求视频路径)

srcposter 都是直接请求的路径

<vue3VideoPlaywidth="800px"title="钢铁侠"src="http://localhost:7100//api/minio/download?fileName=demo-mp4.mp4"poster="http://localhost:7100//api/minio/download?fileName=1.jpg"@play="onPlay"@pause="onPause"@timeupdate="onTimeupdate" />

方案二(转成 Base64 播放)

将二进制流转成 Blob 后再转 Base64,再赋值给 srcposter ,实现播放

<vue3VideoPlaywidth="800px"title="钢铁侠":src="videoSrc":poster="imgSrc"@play="onPlay"@pause="onPause"@timeupdate="onTimeupdate" />

blob2Base64 方法实现在上面,这是 vue3 的代码,可使用其他框架实现,思路一致

let videoSrc = ref('');
axios.get('/api/minio/download', {params: {'fileName': 'demo-mp4.mp4'}, responseType: 'blob'}).then(res => {// 二进制文件let fileBinaryData = res.data;const blob = new Blob([fileBinaryData], {type: 'video/mp4'});blob2Base64(blob).then(res => {videoSrc.value = res;});

image-20231011192642496

更多属性配置请查看文档

vue3-video-play 文档:Vue3VideoPlay (codelife.cc)

其他

文中使用到 MinIO 存放图片,以及使用 SpringBoot 访问图片,给前端提供了 api 接口

想要了解分布式对象存储 MinIO,可以阅读一下博客内容,希望对你有帮助

Linux 部署 MinIO 分布式对象存储 & 配置为 typora 图床

SpringBoot 对接 MinIO 实现文件上传下载删除

了解更多 Linux 知识,docker 安装,服务部署,可以查看专栏

Linux 专栏 - 凉了的凉茶

相关文章:

使用【Blob、Base64】两种方式显示【文本、图片、视频】 使用 video 组件播放视频

Blob 显示 Blob 对象的类型是由 MIME 类型&#xff08;Multipurpose Internet Mail Extensions&#xff09;来确定的。MIME 类型是一种标准&#xff0c;用于表示文档、图像、音频、视频等多媒体文件的类型。以下是一些常见的 Blob 对象类型&#xff1a; text/plain&#xff1…...

深度学习_1_基本语法

数据结构 代码&#xff1a; import torchx torch.arange(12)##产生长度为12的一维张量print(x)##X x.resize(3, 4)##被弃用##print(X)y torch.reshape(x, (3, 4))##修改向量为矩阵&#xff0c;一维变二维print(y)print(y.size())xx torch.zeros((2, 3, 4))##三维矩阵&…...

c#设计模式-行为型模式 之 中介者模式

&#x1f680;简介 又叫调停模式&#xff0c;定义一个中介角色来封装一系列对象之间的交互&#xff0c;使原有对象之间的耦合松散&#xff0c;且可以独立地改变它们之间的交互。 从下右图中可以看到&#xff0c;任何一个类的变 动&#xff0c;只会影响的类本身&#xff0c;以及…...

小程序uView2.X框架upload组件上传方法总结+避坑

呈现效果: 1.1单图片上传 1.2多图片上传 前言:相信很多人写小程序会用到uView框架,总体感觉还算OK吧,只能这么说,肯定也会遇到图片视频上传,如果用到这个upload组件相信你,肯定遇到各种各样的问题,这是我个人总结的单图片和多图片上传方法. uView2.X框架:uView 2.0 - 全面兼容…...

人脸检测及追踪回顾

轻量级人脸检测 代码地址 人脸追踪 代码地址 MNN框架部署文档 文档地址...

虚拟环境和包

目录 12. 虚拟环境和包 12.1. 简介 12.2. 创建虚拟环境 12.3. 使用 pip 管理包 12. 虚拟环境和包 12.1. 简介 Python 应用程序经常会使用一些不属于标准库的包和模块。应用程序有时候需要某个特定版本的库&#xff0c;因为它需要一个特定的 bug 已得到修复的库或者它是使用…...

springboot配置文件读取

项目配置文件 怎么说呢&#xff0c;给了个项目&#xff0c;他启动了&#xff0c;然后我看不懂为啥能够启动项目这样 很迷茫&#xff0c;为啥能够成功启动呢项目&#xff0c;为啥项目有properties也要有yml呢&#xff1f; 问题处理 首先&#xff0c;properties的配置的优先级…...

纵享丝滑!Cesium + ffmpegserver 生成高质量动态视频【逐帧生成】

工作中需要提供一些在三维场景下的视频动画素材&#xff0c;屏幕录制会出现掉帧等其他问题&#xff0c;看到 ffmpegserver 后&#xff0c;眼前一亮 Cesium ffmpegserver 生成高质量视频 1.自建 ffmpegserver 首先&#xff0c;克隆 ffmpegserver 仓库代码 git clone https://…...

Linux下C++编程-进度条

引言&#xff1a;本篇主要在linux下的C实现进度条的功能。按照多文件编程&#xff0c;同时使用Makefile文件完成多文件的编译、连接。 首先创建头文件&#xff1a; 1. progress.h #pragma once #include <iostream> #include <cstring> #include <iomanip>…...

C语言常见题目(1)交换两个变量的值,数的逆序输出,猜数游戏,两个数比较大小等

我的个人主页&#xff1a;☆光之梦☆的博客_CSDN博客-C语言基础语法&#xff08;超详细&#xff09;领域博主 欢迎各位 &#x1f44d;点赞 ⭐收藏 &#x1f4dd;评论 特别标注&#xff1a;本博主将会长期更新c语言的语法知识&#xff0c;初学c语言的朋友们&#xff0c;可以收藏…...

Springboot使用sqlcipher4加密sqlite数据库

在有些业务场景&#xff0c;需要使用sqlite数据库&#xff0c;但sqlite数据库生的db文件&#xff0c;是明文的&#xff0c;该文件被别人拿到&#xff0c;就可以看到里面的所有数据&#xff0c;非常不安全&#xff0c;市面上有很多对sqlite数据库文件加密的方式&#xff0c;但都…...

指针拔尖(2)(巩固提高,全网最牛,包会,看不懂带电脑来找我)

文章目录 前言变量的声明 一、函数指针二、函数指针数组三、指向函数指针数组的指针四、 回调函数总结 前言 提示&#xff1a;本章是指针拔尖系列的终章&#xff0c;有四大知识点。 一、函数指针 二、函数指针数组 三、指向函数指针数组的指针 四、回调函数 但学习这些知识点我…...

本地部署多语言代码生成模型CodeGeeX2

&#x1f3e0; Homepage&#xff5c;&#x1f4bb; GitHub&#xff5c;&#x1f6e0; Tools VS Code, Jetbrains&#xff5c;&#x1f917; HF Repo&#xff5c;&#x1f4c4; Paper &#x1f44b; Join our Discord, Slack, Telegram, WeChat BF16/FP16版本&#xff5c;BF16…...

C语言刷题练习(Day2)

✅作者简介&#xff1a;大家好我是&#xff1a;侠客er&#xff0c;是一名普通电子信息工程专业的大学学生&#xff0c;希望一起努力&#xff0c;一起进步&#xff01; &#x1f4c3;个人主页&#xff1a;侠客er &#x1f525;系列专栏&#xff1a;C语言刷题练习 &#x1f3f7;️…...

docker- harbor私有仓库部署与管理

什么是 harbor harbor是一个开源的云原生镜像仓库&#xff0c;它允许用户存储、签名、和分发docker镜像。可以将 harbor 看作是私有的docker hub &#xff0c;它提供了更新安全性和控制性&#xff0c;让组织能够安全的存储和管理镜像 harbor RBAC&#xff08;基于角色访问控制…...

自动化测试的优缺点

自动化测试的优势 能够极大地提升测试的效率&#xff0c;测试人员可以迅速地在指定平台部署测试脚本且对相应功能进行测试。 “弱化”了软件测试人员个体差异对测试结果的影响。 提高整个测试团队的技能水平。 自动化测试的缺陷 自动化测试的缺陷在于&#xff1a;总是按照…...

深度学习基础知识 Dataset 与 DataLoade的用法解析

深度学习基础知识 Dataset 与 DataLoade的用法解析 1、Dataset2、DataLoader参数设置&#xff1a;1、pin_memory2、num_workers3、collate_fn分类任务目标检测任务 1、Dataset 代码&#xff1a; import torch from torch.utils import dataclass MyDataset(torch.utils.data.D…...

【ElasticSearch】深入探索 DSL 查询语法,实现对文档不同程度的检索,以及对搜索结果的排序、分页和高亮操作

文章目录 前言一、Elasticsearch DSL Query 的分类二、全文检索查询2.1 match 查询2.2 multi_match 查询 三、精确查询3.1 term 查询3.2 range 查询 四、地理坐标查询4.1 geo_bounding_box 查询4.2 geo_distance 查询 五、复合查询5.1 function score 查询5.2 boolean 查询 六、…...

使用wireshark解密ipsec ISAKMP包

Ipsec首先要通过ikev2协议来协商自己后续协商所用的加解密key以及用户数据的esp包用的加解密包。 ISAKMP就是加密过的ike-v2的加密包&#xff0c;有时候我们需要解密这个包来查看协商数据。如何来解密这样的包? 首先导出strongswan协商生成的各种key. 要能导出这些key&#…...

算法进阶-搜索

算法进阶-搜索 题目描述&#xff1a;给定一张N个点M条边的有向无环图&#xff0c;分别统计从每个点除法能够到达的点的数量 **数据规模&#xff1a;**1 < n < 3e4 **分析&#xff1a;**这里我们可以使用拓扑排序根据入边对所有点进行排序&#xff0c;排序后我们按照逆序&…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...

2025.6.9总结(利与弊)

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题&#xff0c;从一个接口人不断溯源到另一个 接口人。有时候&#xff0c;不知道是谁的责任填。将工作内容分的很细&#xff0c;每个人负责其中的一小块。我清楚的意识到&#xff0c;自己就是个可以随时替换的螺丝钉&…...