使用【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>
文本显示

图片显示
要预览 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>
图片显示出来了

Base64 显示
Base64 是一种将二进制数据转换成可打印字符的编码方式。Base64 的底层原理是将 3 个字节的二进制数据转换为 4 个字节的打印字符,每个可打印字符对应 6 个二进制位
简单讲就是,把乱码不可读的二进制转为可读字符
二进制流显示

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 结果显示

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

播放视频
原生播放
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>

使用组件播放
使用 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')
方案一(直接请求视频路径)
src 和 poster 都是直接请求的路径
<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,再赋值给 src 和 poster ,实现播放
<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;});

更多属性配置请查看文档
vue3-video-play 文档:Vue3VideoPlay (codelife.cc)
其他
文中使用到 MinIO 存放图片,以及使用 SpringBoot 访问图片,给前端提供了 api 接口
想要了解分布式对象存储 MinIO,可以阅读一下博客内容,希望对你有帮助
Linux 部署 MinIO 分布式对象存储 & 配置为 typora 图床
SpringBoot 对接 MinIO 实现文件上传下载删除
了解更多 Linux 知识,docker 安装,服务部署,可以查看专栏
Linux 专栏 - 凉了的凉茶
相关文章:
使用【Blob、Base64】两种方式显示【文本、图片、视频】 使用 video 组件播放视频
Blob 显示 Blob 对象的类型是由 MIME 类型(Multipurpose Internet Mail Extensions)来确定的。MIME 类型是一种标准,用于表示文档、图像、音频、视频等多媒体文件的类型。以下是一些常见的 Blob 对象类型: text/plain࿱…...
深度学习_1_基本语法
数据结构 代码: import torchx torch.arange(12)##产生长度为12的一维张量print(x)##X x.resize(3, 4)##被弃用##print(X)y torch.reshape(x, (3, 4))##修改向量为矩阵,一维变二维print(y)print(y.size())xx torch.zeros((2, 3, 4))##三维矩阵&…...
c#设计模式-行为型模式 之 中介者模式
🚀简介 又叫调停模式,定义一个中介角色来封装一系列对象之间的交互,使原有对象之间的耦合松散,且可以独立地改变它们之间的交互。 从下右图中可以看到,任何一个类的变 动,只会影响的类本身,以及…...
小程序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 应用程序经常会使用一些不属于标准库的包和模块。应用程序有时候需要某个特定版本的库,因为它需要一个特定的 bug 已得到修复的库或者它是使用…...
springboot配置文件读取
项目配置文件 怎么说呢,给了个项目,他启动了,然后我看不懂为啥能够启动项目这样 很迷茫,为啥能够成功启动呢项目,为啥项目有properties也要有yml呢? 问题处理 首先,properties的配置的优先级…...
纵享丝滑!Cesium + ffmpegserver 生成高质量动态视频【逐帧生成】
工作中需要提供一些在三维场景下的视频动画素材,屏幕录制会出现掉帧等其他问题,看到 ffmpegserver 后,眼前一亮 Cesium ffmpegserver 生成高质量视频 1.自建 ffmpegserver 首先,克隆 ffmpegserver 仓库代码 git clone https://…...
Linux下C++编程-进度条
引言:本篇主要在linux下的C实现进度条的功能。按照多文件编程,同时使用Makefile文件完成多文件的编译、连接。 首先创建头文件: 1. progress.h #pragma once #include <iostream> #include <cstring> #include <iomanip>…...
C语言常见题目(1)交换两个变量的值,数的逆序输出,猜数游戏,两个数比较大小等
我的个人主页:☆光之梦☆的博客_CSDN博客-C语言基础语法(超详细)领域博主 欢迎各位 👍点赞 ⭐收藏 📝评论 特别标注:本博主将会长期更新c语言的语法知识,初学c语言的朋友们,可以收藏…...
Springboot使用sqlcipher4加密sqlite数据库
在有些业务场景,需要使用sqlite数据库,但sqlite数据库生的db文件,是明文的,该文件被别人拿到,就可以看到里面的所有数据,非常不安全,市面上有很多对sqlite数据库文件加密的方式,但都…...
指针拔尖(2)(巩固提高,全网最牛,包会,看不懂带电脑来找我)
文章目录 前言变量的声明 一、函数指针二、函数指针数组三、指向函数指针数组的指针四、 回调函数总结 前言 提示:本章是指针拔尖系列的终章,有四大知识点。 一、函数指针 二、函数指针数组 三、指向函数指针数组的指针 四、回调函数 但学习这些知识点我…...
本地部署多语言代码生成模型CodeGeeX2
🏠 Homepage|💻 GitHub|🛠 Tools VS Code, Jetbrains|🤗 HF Repo|📄 Paper 👋 Join our Discord, Slack, Telegram, WeChat BF16/FP16版本|BF16…...
C语言刷题练习(Day2)
✅作者简介:大家好我是:侠客er,是一名普通电子信息工程专业的大学学生,希望一起努力,一起进步! 📃个人主页:侠客er 🔥系列专栏:C语言刷题练习 🏷️…...
docker- harbor私有仓库部署与管理
什么是 harbor harbor是一个开源的云原生镜像仓库,它允许用户存储、签名、和分发docker镜像。可以将 harbor 看作是私有的docker hub ,它提供了更新安全性和控制性,让组织能够安全的存储和管理镜像 harbor RBAC(基于角色访问控制…...
自动化测试的优缺点
自动化测试的优势 能够极大地提升测试的效率,测试人员可以迅速地在指定平台部署测试脚本且对相应功能进行测试。 “弱化”了软件测试人员个体差异对测试结果的影响。 提高整个测试团队的技能水平。 自动化测试的缺陷 自动化测试的缺陷在于:总是按照…...
深度学习基础知识 Dataset 与 DataLoade的用法解析
深度学习基础知识 Dataset 与 DataLoade的用法解析 1、Dataset2、DataLoader参数设置:1、pin_memory2、num_workers3、collate_fn分类任务目标检测任务 1、Dataset 代码: 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的加密包,有时候我们需要解密这个包来查看协商数据。如何来解密这样的包? 首先导出strongswan协商生成的各种key. 要能导出这些key&#…...
算法进阶-搜索
算法进阶-搜索 题目描述:给定一张N个点M条边的有向无环图,分别统计从每个点除法能够到达的点的数量 **数据规模:**1 < n < 3e4 **分析:**这里我们可以使用拓扑排序根据入边对所有点进行排序,排序后我们按照逆序&…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
