Blob 顯示
Blob 對(duì)象的類型是由 MIME 類型（Multipurpose Internet Mail Extensions）來(lái)確定的。MIME 類型是一種標(biāo)準(zhǔn)，用于表示文檔、圖像、音頻、視頻等多媒體文件的類型。以下是一些常見(jiàn)的 Blob 對(duì)象類型：
- 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）對(duì)象表示一個(gè)不可變的、原始數(shù)據(jù)的類文件對(duì)象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取，也可以轉(zhuǎn)換成 ReadableStream 來(lái)用于數(shù)據(jù)操作。
new Blob([text], {type: 'text/plain'}) 來(lái)創(chuàng)建一個(gè)包含字符串"測(cè)試 blog 文字顯示文本信息"的 Blob 對(duì)象。這個(gè)Blob對(duì)象的MIME類型是 “text/plain” ，表示它包含純文本數(shù)據(jù)。
顯示文字，使用 blob.text() 將其轉(zhuǎn)化為文本格式
<script setup>
import {ref} from 'vue';
import axios from 'axios';
let text = '測(cè)試 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>
文本顯示
圖片顯示
要預(yù)覽 Blob 對(duì)象中的圖片，可以使用 JavaScript 中的 URL.createObjectURL() 方法。這個(gè)方法將 Blob 對(duì)象轉(zhuǎn)換為一個(gè) URL，然后可以將這個(gè) URL 賦值給 img 元素的 src 屬性
在發(fā)送請(qǐng)求是要注明參數(shù) 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 => {
// 二進(jìn)制文件
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-29c5a5ce0c7f
imgSrc.value = url;
});
</script>
<template>
<main>
<div>{{ blobText }}</div>
<a-image
:width="200"
:src="imgSrc"
/>
</main>
</template>
圖片顯示出來(lái)了
Base64 顯示
Base64 是一種將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成可打印字符的編碼方式。Base64 的底層原理是將 3 個(gè)字節(jié)的二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為 4 個(gè)字節(jié)的打印字符，每個(gè)可打印字符對(duì)應(yīng) 6 個(gè)二進(jìn)制位
簡(jiǎn)單講就是，把亂碼不可讀的二進(jìn)制轉(zhuǎn)為可讀字符
二進(jìn)制流顯示
Blob 轉(zhuǎn) Base64
如果要二進(jìn)制轉(zhuǎn) Base64，就先把二進(jìn)制流轉(zhuǎn)成 Blob，再轉(zhuǎn)成 Base64
// blob 轉(zhuǎn) 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 結(jié)果顯示
Base64 顯示圖片
使用 base64 賦值給圖片的 src 也可以顯示出來(lái)
播放視頻
原生播放
http://localhost:7100//api/minio/download?fileName=demo-mp4.mp4 為視頻請(qǐng)求地址
<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 播放，功能會(huì)比較多
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')
方案一（直接請(qǐng)求視頻路徑）
src 和 poster 都是直接請(qǐng)求的路徑
<vue3VideoPlay
width="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" />
方案二（轉(zhuǎn)成 Base64 播放）
將二進(jìn)制流轉(zhuǎn)成 Blob 后再轉(zhuǎn) Base64，再賦值給 src 和 poster ，實(shí)現(xiàn)播放
<vue3VideoPlay
width="800px"
title="鋼鐵俠"
:src="videoSrc"
:poster="imgSrc"
@play="onPlay"
@pause="onPause"
@timeupdate="onTimeupdate" />
blob2Base64 方法實(shí)現(xiàn)在上面，這是 vue3 的代碼，可使用其他框架實(shí)現(xiàn)，思路一致
let videoSrc = ref('');
axios.get('/api/minio/download', {params: {'fileName': 'demo-mp4.mp4'}, responseType: 'blob'}).then(res => {
// 二進(jìn)制文件
let fileBinaryData = res.data;
const blob = new Blob([fileBinaryData], {type: 'video/mp4'});
blob2Base64(blob).then(res => {
videoSrc.value = res;
});
更多屬性配置請(qǐng)查看文檔
vue3-video-play 文檔：Vue3VideoPlay (codelife.cc)
其他
文中使用到 MinIO 存放圖片，以及使用 SpringBoot 訪問(wèn)圖片，給前端提供了 api 接口
想要了解分布式對(duì)象存儲(chǔ) MinIO，可以閱讀一下博客內(nèi)容，希望對(duì)你有幫助
Linux 部署 MinIO 分布式對(duì)象存儲(chǔ) & 配置為 typora 圖床
SpringBoot 對(duì)接 MinIO 實(shí)現(xiàn)文件上傳下載刪除
了解更多 Linux 知識(shí)，docker 安裝，服務(wù)部署，可以查看專欄文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-774311.html
Linux 專欄 - 涼了的涼茶文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-774311.html
到了這里，關(guān)于使用【Blob、Base64】?jī)煞N方式顯示【文本、圖片、視頻】 & 使用 video 組件播放視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
