使用【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 专栏 - 凉了的凉茶

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

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

相关文章

大数据学习(9)-hadoop集群计算速度影响因素

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博>主哦&#x…

drone如何发布docker服务

上篇主要实现了drone在物理机上进行发布程序&#xff0c;这次介绍drone如何发布docker类型的服务。 一 drone.yml文件配置 前提&#xff1a;需要提前在drone里添加文件里面所引用的密钥 kind: pipeline # 定义对象类型&#xff0c;还有secret和signature两种类型 type: dock…

SaaS人力资源管理系统的Bug

SaaS人力资源管理系统的Bug Bug1【18】 这里我是直接把代码复制过来的&#xff0c;然后就有一个空白 这是因为它的代码有问题&#xff0c;原本的代码如下所示 <el-table-column fixed type"index" label"序号" width"50"></el-table…

Android之SpannableString使用

文章目录 前言一、效果图二、实现代码总结 前言 在开发中&#xff0c;往往有些需求是我们不愿意遇到的&#xff0c;但是也不得不处理的事情&#xff0c;比如一段文案&#xff0c;需要文案中某些文字变颜色或者点击跳转&#xff0c;所以简单写了几句代码实现&#xff0c;没什么…

java气候分析平台天气预报系统springboot+vue

保护措施 (自动编号、图片、措施简介、措施地点、措施时间、创建时间、措施详情、措施名称)&#xff1b; 报名信息 (自动编号、活动地点、图片、活动名称、活动时间、参与人数、活动详情、审核回复、创建时间、报名时间、手机、活动简介、是否审核、姓名、账号)&#xff1b; 配…

uniapp 一次性上传多条视频 u-upload accept=“video“ uni.chooseMedia uni.uploadFile

方式 一 部分安卓机 只能一条一条传视频 文档地址 uview 2.0 Upload 上传组件 html <view class"formupload"><u-upload accept"video":fileList"fileList3" afterRead"afterRead" delete"deletePic" name"…

Elasticsearch集群管理原理

Elasticsearch 是一个开源的、基于 Lucene 的分布式搜索和分析引擎&#xff0c;设计用于云计算环境中&#xff0c;能够实现实时的、可扩展的搜索、分析和探索全文和结构化数据。它具有高度的可扩展性&#xff0c;可以在短时间内搜索和分析大量数据。 Elasticsearch 不仅仅是一个…

算法练习13——跳跃游戏II

LeetCode 45 跳跃游戏 II 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回…

[Python进阶] 操纵鼠标:pyuserinput

6.2 操纵鼠标&#xff1a;pyuserinput 6.2.1 说明 在安装pyuserinput库时会自动安装PyMouse和PyKeyboard库。前者主要用来操作鼠标&#xff0c;包括鼠标的点击、移动等。后者主要用来操作键盘&#xff0c;包括键盘按键的按下、弹起等。 这两个库还可以同时对鼠标和键盘的事件…

idea一些不太常用但是能提升编码效率的快捷键

Ctrl Shift V&#xff1a;从历史选择粘贴 从历史剪粘版中选择要粘贴的内容。Ctrl Shift Z&#xff1a;重做 恢复上一步撤销内容Shift F4&#xff1a;在新窗口中打开 比如要从另一个类中复制代码 可以把这个类在新窗口单独打开 用AltTab 来回切换复制Ctrl PageUp&#xff…

前端、后端开发者常用到的免费API整理

以下是我整理的前端、后端工程师在开发中经常使用到的API接口&#xff0c;希望能帮到大家~ 手机号码归属地&#xff1a;可根据手机号码查询其省市区、运营商区号行政区划代码等信息。 上亿条数据囊括最新的170、166、147等号段&#xff0c;更新及时、准确度高。空号检测&#…

应变能力差怎么办?如何提高应变能力?

应变能力说的是人的反应能力&#xff0c;尤其是当环境&#xff0c;或者是事物在发生变化&#xff0c;如何做出快速反应&#xff0c;并且尽量确保这个反应是适当的&#xff0c;是最优的。这个反应有可能是本能反应&#xff0c;也有可能是基于快速思考后得出的。 良好的应变能力…

【漏洞复现】安全云平台存在任意文件下载getshell

漏洞描述 深圳市强鸿电子有限公司鸿运主动安全云平台存在任意文件下载漏洞,攻击者可通过此漏洞下载敏感文件信息。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和利益,未经授权…

el-table合计行合并

效果如下 因为合计el-table的合并方法是不生效的,所以需要修改css下手 watch: {// 应急物资的合计合并planData: {immediate: true,handler() {setTimeout(() > {const tds document.querySelectorAll(".pro_table .el-table__footer-wrapper tr>td");tds[0]…

MATLAB算法实战应用案例精讲-【图像处理】机器视觉(补充篇)

目录 前言 知识储备 嵌入式视觉系统 嵌入式视觉系统的构建模块 设备接口 图像处理链

C++笔记之std::future的用法

C笔记之std::future的用法 code review! 文章目录 C笔记之std::future的用法1.C中std::future和std::async总是一起出现吗&#xff1f;2.主要特点和用法3.一个完整的例子4.std::future 存放的是一个结果吗&#xff1f;5.cppreference——std::future 1.C中std::future和std::a…

数据分析基础:数据可视化+数据分析报告

数据分析是指通过对大量数据进行收集、整理、处理和分析&#xff0c;以发现其中的模式、趋势和关联&#xff0c;并从中提取有价值的信息和知识。 数据可视化和数据分析报告是数据分析过程中非常重要的两个环节&#xff0c;它们帮助将数据转化为易于理解和传达的形式&#xff0…

C++ - git 命令行

为什么要有 git 你很可能遇到过这种情况&#xff0c;在写项目的时候&#xff0c;要我不符合 leader 的要求&#xff0c;因而修改了很多个版本&#xff0c;但是修改到最后一版的时候&#xff0c;leader 有觉得当前这版还没有之前 某一版好&#xff0c;现在又要求你在 之前的那一…

KWin、libdrm、DRM从上到下全过程 —— drmModeAddFBxxx(8)

接前一篇文章:KWin、libdrm、DRM从上到下全过程 —— drmModeAddFBxxx(7) 上一回讲到了drm_internal_framebuffer_create函数中的framebuffer_check函数中的drm_get_format_info函数,讲解了该函数的第一部分暨前一部分,本文讲解后一部分。为了便于理解以及理清脉络和当前所…

OJ项目——用户的登录拦截,我是如何实现的?

目录 前言 1、关于Session该如何处理 简单session回顾&#xff1a; 回顾session的setAttribute、getAttribute : 项目中如何做&#xff1f; 2、登陆拦截器实现 自定义拦截器&#xff1a; 自定义拦截&#xff1a; 前言 博主之前也有出过一期关于拦截器的&#xff0c;大…