vue2实现字节流byte[]数组的图片预览

news2025/1/14 1:23:32

项目使用vantui框架,后端返回图片的字节流byte[]数组,在移动端实现预览,实现代码如下:

<template>
	<!-- 附件预览 -->
	<div class="file-preview-wrap">
		<van-overlay :show="show">
			<div class="wrapper" id="preview-box" @click="show = !show" @click.stop></div>
		</van-overlay>
	</div>
</template>
<script>
import { httpPostMethod } from '../common/HttpService';
export default {
    data() {
		return {
			show: false,// 弹窗是否显示
			pdfUrl:'',// pdf地址
		}
	},
	methods: {
		// 字节流转化预览
		previewBytes(byte) {
			// 字节流转化为字符串
			var str12 = this.arrayBufferToBase64(byte);//转换字符串
			var outputImg = document.createElement('img');
			outputImg.src = 'data:image/png;base64,'+str12;
			outputImg.style.width = '100%';
			document.getElementById('preview-box').innerHTML = '';
			document.getElementById('preview-box').appendChild(outputImg);
			this.show = true;
		},
		// 打开附件
		openAtta(attaInfo, handleFun){
			// res 模拟接口获取的字节流数组byte[]数据
			let res = [/* 字节流数组byte[]数据,示例数据在下面链接内 */];
			this.previewBytes(res.FILE_TYPE);
		}
	}
}
</script>

字节流数组byte数据示例下载

效果如图所示:
在这里插入图片描述

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

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

相关文章

调试 WebSocket API 技巧分享

WebSocket 是一种在单个 TCP 连接上实现全双工通信的先进 API 技术。与传统的 HTTP 请求相比&#xff0c;WebSocket 提供了更低的延迟和更高的通信效率&#xff0c;使其成为在线游戏、实时聊天等应用的理想选择。 开始使用 Apifox 的 WebSocket 功能 首先&#xff0c;在项目界…

阿里云操作日记

昨天买了一个超级便宜的阿里云服务器&#xff0c;2核2G&#xff0c;3M固定带宽&#xff0c;40G ESSD Entry云盘&#xff0c;搭载一个简单的系统&#xff0c;就想到了docker轻量级&#xff0c;易于管理 其实docker很好用&#xff0c;第一步就是安装docker 一、docker安装与端口…

解决在服务器中减少删除大文件夹耗时太久的问题

在数据驱动的现代商业环境中&#xff0c;企业对服务器的高效运作有着极高的依赖性。然而&#xff0c;IT管理员们常常面临一个棘手的问题&#xff1a;删除服务器上的大型文件夹过程缓慢&#xff0c;这不仅降低了工作效率&#xff0c;还可能对用户体验造成负面影响。本文将介绍一…

【Linux】认识文件(三):缓冲区

【Linux】认识文件&#xff08;三&#xff09;&#xff1a;缓冲区 一.啥是缓冲区&#xff1f;二.缓冲区现象三.缓冲区的刷新方法四.缓冲区在哪&#xff1f;五.为什么要有缓冲区 一.啥是缓冲区&#xff1f; 缓冲区&#xff0c;官方说法就是&#xff1a;指的是一块用于临时存储数…

2739. 总行驶距离

思路 模拟一下即可&#xff0c;每次让 mainTank 减去 5 &#xff0c;然后如果 additionalTank 大于 0&#xff0c;就在让 mainTank 加 1&#xff0c;最后让 additionalTank 减 1。当不满足 mainTank - 5 > 0 && additionalTank > 0 时即退出。 class Solution { …

vue3.0项目中运用vant的以及移动端的适配

文章目录 概要移动端的适配vant的引入开发以及打包过程中遇到的问题 概要 在Vue-Vben-Admin项目中运用vant-ui实现部分页面支持手机端h5页面的预览 移动端的适配 适配的原理 自适应 根据不同的设备的屏幕大小来自动调整尺寸&#xff0c;大小响应式 会随着屏幕的变动而自动调整…

文末送资料|跟着开源学技术-ChatGPT开源项目-chatgpt-java

目录 功能特性 最简使用 进阶使用 函数调用&#xff08;Function Call&#xff09; 流式使用 流式配合Spring SseEmitter使用 多KEY自动轮询 大家好&#xff0c;我是充电君 今天带着大家来看个Java版本的ChatGPT。这个开源项目就是chatgpt-java。 Github&#xff1a; h…

gitcode 上传文件报错文件太大has exceeded the upper limited size

报错 remote: Start Git Hooks Checking Error: Deny by project hooks setting ‘default’ has exceeded the upper limited size (10 MB) in commit 当前有效的解决方案 项目设置->提交设置->勾选管理员不受规则限制->提交 重新push&#xff0c;提交成功

计算机提示dll文件缺失如何恢复?多种方法快速一键修复dll问题

动态链接库&#xff08;DLL&#xff09;是Windows操作系统中不可或缺的一部分&#xff0c;它们封装了大量的函数、类和资源&#xff0c;供多个应用程序共享使用&#xff0c;以实现功能复用、节省内存和简化软件部署。然而&#xff0c;在日常使用或软件开发过程中&#xff0c;我…

pycharm爬虫模块(scrapy)基础使用

今天学了个爬虫。在此记录 目录 一.通过scrapy在命令行创建爬虫项目 二.判断数据为静态还是动态 三.pycharm中的设置 三:爬虫主体 四.pipelines配置&#xff08;保存数据的&#xff09; 五.最终结果 一.通过scrapy在命令行创建爬虫项目 1.首先需要在cmd中进入到python文…

MySQL——运维

日志 错误日志 错误日志是 MySQL 中最重要的日志之一&#xff0c;它记录了当 mysqld 启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息。当数据库出现任何故障导致无法正常使用时&#xff0c;建议首先查看此日志。 查看日志位置&#xff1a; sho…

招商画册不会制作?这个教程收藏好

在制作招商画册过程中可能对于一些小型企业或刚刚起步的企业来说&#xff0c;招商画册的制作也不是一个难以克服的难题。本文将为您提供一些制作招商画册的技巧和建议。在制作招商画册前肯定是需要选择一款合适的在线制作工具&#xff0c;如FLBOOK 这个平台本就有海量的模板和设…

【Git教程】(十六)基于构建服务器的工作 — 概述及使用要求,执行过程及其实现,替代解决方案 ~

Git教程 基于构建服务器的工作 1️⃣ 概述2️⃣ 使用要求3️⃣ 执行过程及其实现3.1 预备构建服务器3.2 构建服务器上的 Git3.3 比对本地开发版本与最后成功构建版本之间的差异3.4 基于构建历史的排错 4️⃣ 替代解决方案4.1 使用标签4.2 将构建历史放在中央版本库中 许多项目…

设计模式(六):原型模式

设计模式&#xff08;六&#xff09;&#xff1a;原型模式 1. 原型模式的介绍2. 原型模式的类图3. 原型模式的实现3.1 创建一个原型接口3.2 创建具体原型3.3 创建一个数据缓存类3.4 测试 1. 原型模式的介绍 原型模式&#xff08;Prototype Pattern&#xff09;属于创建型模式&…

ctfshow web29-web40

命令执行 看清都过滤了些什么&#xff01;&#xff01; 知识点&#xff1a; web34&#xff1a;当;和()被过滤了就用语言结构&#xff0c;一般有echo print isset unset include require web37&#xff1a;data协议是将后面的字符串当成php代码执行&#xff0c;例如 /?cdat…

LabVIEW学习记录2 - MySQL数据库连接与操作

LabVIEW学习记录2 - MySQL数据库连接与操作 一、前期准备1.1 windows下安装MySQL的ODBC驱动 二、LabVIEW创建MySQL 的UDL文件三、LabVIEW使用UDL文件进行MySQL数据库操作3.1 建立与数据库的连接&#xff1a;DB Tools Open Connection.vi3.2 断开与数据库的连接&#xff1a;DB T…

如何通过ABAP将数据写回BPC模型

今天给大家安利一个标准方法&#xff0c;主要用于回写BPC模型数据&#xff0c;一般情况下&#xff0c;BPC模型数据的回写&#xff0c;标准的方式有数据抽取&#xff0c;直接抽取供数模型的数&#xff0c;利用BW标准转换方式进行供数&#xff0c;又或者通过逻辑脚本BADI的方式直…

【数据结构】哈希桶

目录 前言&#xff1a; 开散列&#xff08;哈希桶&#xff09; 开散列的概念 哈希桶的模拟实现 整体框架 查找 插入 删除 析构函数 前言&#xff1a; 闭散列线性探测缺点&#xff1a;一旦发生哈希冲突&#xff0c;所有的产生哈希冲突的数据连续存储在一块区域&#xff…

【Github】sync fork后,意外关闭之前提交分支的pr申请 + 找回被关闭的pr请求分支中的文件

【Github】sync fork后&#xff0c;意外关闭之前提交分支的pr申请 找回被关闭的pr请求分支中的文件 写在最前面原因解析提交pr&#xff0c;pr是什么&#xff1f;rebase 或者 merge 命令 找到分支中被删除的文件找到被关闭的提交请求pr方法1&#xff1a;在公共仓库被关闭的pr中…

NXP i.MX8系列平台开发讲解 - 3.9 Linux PCIe协议相关介绍(二)

目录 1. PCIe 传输层协议 2. TLP介绍 2.1 TLP包格式 2.2 TLP包的种类 2.3 TLP 包传输例子 2.4 TLP 路由规则 根据上一章的知识&#xff0c;对于PCIe的发展和基础知识有了大概了解&#xff0c;本章节将会讲解PCIe的一些工作原理&#xff0c;使用的协议&#xff0c;通信交互…