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

devtools/2024/9/23 6:31:27/

项目使用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.ppmy.cn/devtools/16851.html

相关文章

js网络请求---fetch和XMLHttpRequest的用法

fetch 语法规则 let promise fetch(url, [options]) //url —— 字符串&#xff1a;要访问的 URL。 //options —— 对象&#xff1a;可选参数&#xff1a;method&#xff0c;header 等。 fetch函数返回一个promise&#xff0c;若存在网络问题&#xff0c;或网址不存在&…

先进制造aps专题四 计划型简单aps系统(plan)和排产型复杂aps系统(Scheduling)的区别

计划型算法很简单&#xff0c;只考虑产品和产线/车间&#xff0c;一个产线/车间对于一个产品&#xff0c;产线/车间24小时生产&#xff0c;没有休息时间段&#xff0c;java web类型的aps系统都是这种类型&#xff0c;这种其实是计划型的aps系统(plan) 要是排产考虑产品工序&am…

《架构风清扬-Java面试系列第27讲》Java中如何正确优雅关闭线程?

这道题也是容易答错的题目之一&#xff0c;原因是因为有一个stop方法容易误导大家 一般也是考核工作三年以内的小伙伴&#xff0c;不属于有难度的题目 但由于出现频率不低&#xff0c;所以&#xff0c;钊哥有必要跟小伙伴们聊一聊 来&#xff0c;老规矩&#xff0c;在往下看答案…

计算机视觉——两视图几何求解投影矩阵

上文我提到了通过图像匹配得到基本矩阵&#xff0c;接下来我们要接着求解投影矩阵。 计算投影矩阵思路 假设两个投影矩阵为规范化相机&#xff0c;因此采用基本矩阵进行恢复。在规范化相机下&#xff0c; P [ I ∣ 0 ] P[I|0] P[I∣0], P ′ [ M ∣ m ] P[M|m] P′[M∣m]。…

iOS 在OC旧项目中使用Swift进行混编

iOS 在OC旧项目中使用Swift进行混编 1、创建桥接文件 ​ 第一次在Swift创建OC文件&#xff0c;或者第一次OC创建Swift时&#xff0c;xcode会提示桥接&#xff0c;Creat Bridging Header即可,这个文件用于Swift调用OC文件&#xff0c;与OC调用Swift无关。 2、在TARGETS中设置D…

数字化革新:可视化墨水屏引领基板工艺MSAP贴膜阶段迈向无纸化高端制造应用背景

随着科技的飞速发展和环境保护意识的日益增强&#xff0c;制造印刷电路板&#xff08;PCB&#xff09;行业正面临着提升生产效率、降低资源消耗和推动绿色制造的迫切需求。 问题&#xff1a; PCB生产过程对洁净度要求高&#xff0c;传统打印的纸张会有粉尘&#xff0c;纸屑&am…

安卓原生项目工程结构说明

.gradle 和 .idea (自动生成) .gradle 是gradle下载好的缓存&#xff0c;如果有配置好的 下载好的缓存 直接会拿来用 没有会下载 生成 .idea 是编辑器的配置 app 代码主逻辑 目录 项目中的代码 资源都会在里面 工作的时候的核心目录 gradle 下载安卓的构建器gradle相关的配置信…

极客蒂姆·斯威尼:用虚幻引擎,修补真实世界(上) | 人物志

大片繁茂的植被覆盖在荒废破败的建筑上&#xff0c;昔日光洁的红墙变得暗淡又斑驳&#xff0c;有几根粗壮的嫩绿藤蔓沿着墙面暗红的伤痕向天空探去。天空湛蓝如镜&#xff0c;而远处的高塔却又弥漫起尘埃&#xff0c;漠然盖过山石之间的那座木桥。 一位大叔和少女无声无息&…