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

项目使用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.mzph.cn/news/830177.shtml

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

相关文章

【Markdown笔记】——设置markdown中文字的颜色

【Markdown笔记】——设置markdown中文字的颜色 Markdownmarkdown中设置文字颜色常用颜色对照表【含RGB值对照】 &#x1f49d;&#x1f49d;&#x1f49d; 欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#x…

笔记:能量谱密度与功率谱密度(二)

目录 一、ESD与PSD的定义、单位、性质 二、对ESD与PSD的直观理解 三、总结&#xff1a; 某物理量的“分布”在离散系统中&#xff0c;各点(纵坐标含义&#xff09;的物理意义仍然是该物理量&#xff0c;而在连续系统中&#xff0c;各点&#xff08;纵坐标含义&#xff09;的物…

实战干货|Spark 在袋鼠云数栈的深度探索与实践

Spark 是一个快速、通用、可扩展的大数据计算引擎&#xff0c;具有高性能、易用、容错、可以与 Hadoop 生态无缝集成、社区活跃度高等优点。在实际使用中&#xff0c;具有广泛的应用场景&#xff1a; 数据清洗和预处理&#xff1a;在大数据分析场景下&#xff0c;数据通常需要…

后台架构总结

前言 疫情三年&#xff0c;全国各地的健康码成为了每个人的重要生活组成部分。虽然过去一年&#xff0c;但是回想起来任然历历在目。 今天我就通过当时基于小程序的健康码架构&#xff0c;来给大家讲一下如何基于java&#xff0c;springboot等技术来快速搭建一个后台业务系统…

Pixelmator Pro for Mac:简洁而强大的图像编辑软件

Pixelmator Pro for Mac是一款专为Mac用户设计的图像编辑软件&#xff0c;它集简洁的操作界面与强大的功能于一身&#xff0c;为用户提供了卓越的图像编辑体验。 Pixelmator Pro for Mac v3.5.9中文激活版下载 该软件支持多种文件格式&#xff0c;包括常见的JPEG、PNG、TIFF等&…

系统触发器

目录 数据库触发器 常见触发器&#xff0c;记录登录和退出数据库事件 模式触发器 创建一个模式触发器&#xff0c;记录各种 DDL 操作的日志 Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 前面已经介绍过&#xff0c;…

WEB攻防-PHP特性-函数缺陷对比

目录 和 MD5函数 intval ​strpos in_array preg_match str_replace 和 使用 时&#xff0c;如果两个比较的操作数类型不同&#xff0c;PHP 会尝试将它们转换为相同的类型&#xff0c;然后再进行比较。 使用 进行比较时&#xff0c;不仅比较值&#xff0c;还比较变量…

MATLAB非均匀网格梯度计算

在matlab中&#xff0c;gradient函数可以很方便的对均匀网格进行梯度计算&#xff0c;但是对于非均匀网格&#xff0c;但是gradient却无法求解非均匀网格的梯度&#xff0c;这一点我之前犯过错误。我之前以为在gradient函数中指定x&#xff0c;y等坐标&#xff0c;其求解的就是…

Metasploit 溢出 samba 提权漏洞

一、信息收集 1.1 右键单击桌面&#xff0c;选择 Open Terminal Here &#xff0c;打开终端。 1.2 输入命令 nmap -sS -p 139,445 -A 192.168.1.254 ,对目标主机进行扫描,发现 139、445 端口开放。 1.3 输入命令“msfconsole”&#xff0c;启动 MSF 终端。 1.4 输入命令“searc…

电脑录制视频快捷键,一键开启录屏新时代(干货)

“最近尝试录制一些电脑上的操作视频&#xff0c;用来制作教学教程。不过&#xff0c;每次录制都要通过菜单或搜索来打开录屏软件&#xff0c;实在是有些繁琐。有没有人知道哪些电脑录制视频的快捷键呀&#xff1f;或者有没有通用的快捷键设置方法&#xff1f;” 在当今数字时…

免费语音转文字:自建Whisper,贝锐花生壳3步远程访问

Whisper是OpenAI开发的自动语音识别系统&#xff08;语音转文字&#xff09;。 OpenAI称其英文语音辨识能力已达到人类水准&#xff0c;且支持其它98中语言的自动语音辨识&#xff0c;Whisper神经网络模型被训练来运行语音辨识与翻译任务。 此外&#xff0c;与其他需要联网运行…

MySQL中脏读与幻读

一般对于我们的业务系统去访问数据库而言&#xff0c;它往往是多个线程并发执行多个事务的&#xff0c;对于数据库而言&#xff0c;它会有多个事务同时执行&#xff0c;可能这多个事务还会同时更新和查询同一条数据&#xff0c;所以这里会有一些问题需要数据库来解决 我们来看…

centos 7使用源码编译安装Python 3.12.2(最新版本)

&#xff08;一&#xff09;、说明 在centos 7上&#xff0c;默认安装出来的python是&#xff1a;2.7.5版本 1.查看python版本&#xff1a; python --version 2.通过yum安装出来的&#xff0c;适合当前操作系统的&#xff0c;最新的python版本是&#xff1a;3.6.8 python3…

云手机对出海企业有什么帮助?

近些年&#xff0c;越来越多的企业开始向海外拓展&#xff0c;意图发掘更广阔的市场。在这过程中&#xff0c;云手机作为一个新型工具为很多企业提供了助力&#xff0c;尤其在解决海外市场拓展过程中的诸多挑战方面发挥着作用。 首先&#xff0c;云手机的出现解决了企业在海外拓…

【Linux系统化学习】死锁 | 线程同步

目录 死锁 死锁的必要条件 避免死锁 线程同步 条件变量 同步概念和竞态条件 条件变量接口 创建和初始化条件变量 等待条件满足 唤醒等待 毁条件变量 为什么 pthread_cond_wait 需要互斥量? 条件变量使用规范 等待条件代码 给条件发送信号代码 死锁 死锁是指在一…

扭蛋机小程序带来了什么优势?扭蛋机收益攻略

在当下的潮流消费时代&#xff0c;人们对潮玩也日益个性化&#xff0c;扭蛋机作为一种新型的娱乐消费模式&#xff0c;深受大众喜爱。扭蛋机的价格低&#xff0c;各个年龄层的玩家都可以进行购买&#xff0c;潜在玩家量非常大。扭蛋机商品主打热门IP周边等&#xff0c;种类繁多…

【PostgreSQL】Postgres数据库安装、配置、使用DBLink详解

目录 一、技术背景1.1 背景1.2 什么是 DBLink 二、安装配置 DBLink2.1 安装 DBLink2.2 配置 DBLink1. 修改 postgresql.conf2. 修改 pg_hba.conf 三、DBLink 使用3.1 数据准备3.2 DBLink 使用1. 创建 DBLink 连接2. 使用 DBLink 进行查询3. 使用 DBLink 进行增删改4. 使用 DBLi…

python代码实现kmeans对鸢尾花聚类

导入第三方库和模型 from sklearn import datasets import numpy as np import matplotlib.pyplot as plt from sklearn.cluster import KMeans2、创建画图函数 def draw_result(train_x, labels, cents, title):n_clusters np.unique(labels).shape[0]#获取类别个数color …

用vue3实现留言板功能

效果图&#xff1a; 代码&#xff1a; <script setup lang"ts"> import { ref } from vue;interface Message {name: string;phone: string;message: string; }const name ref<string>(); const phone ref<string>(); const message ref<st…

Llama 3 安装使用方法

Llama3简介&#xff1a; llama3是一种自回归语言模型&#xff0c;采用了transformer架构&#xff0c;目前开源了8b和70b参数的预训练和指令微调模型&#xff0c;400b正在训练中&#xff0c;性能非常强悍&#xff0c;并且在15万亿个标记的公开数据进行了预训练&#xff0c;比ll…