uniapp 微信小程序 判断数据返回的是jpg还是pdf,以及pdf预览

<template>
<view class="approval-notice"><block v-for="(imgItem, idx) in drivingLicense" :key="idx">//如果是非图片,那就走pdf预览<view class="pdf-item" v-if="Object.keys(thumbnail).includes(getFileType(imgItem))" @click="handlePreview(idx,drivingLicense)"><image src="../static/pdf-icon.png" mode="aspectFill"></image><text class="text">{{getFileName(imgItem)}}</text></view>//如果是图片,那就走图片预览<view class="img-item" v-else @click="handlePreview(idx,drivingLicense)"><image :src="imgItem" mode="aspectFill"></image><text class="text">{{getFileName(imgItem)}}</text></view></block>
</view>
</template>
data() {return {//数据返回的文件列表(↓↓包含以下格式↓↓)drivingLicense:['https://www.baidu.com/5cf22168b26b0_20230720114248A003.jpg','https://www.baidu.com/5cf22168b26b0_20230720114278A003.jpg'],fileTypeLimit:['png', 'jpg', 'jpeg', 'pdf'],//仅支持这些格式thumbnail:{pdf: '',apk: '',mp4: ''}}}
methods: {//获取文件后缀名getFileType(fileName, isUserType = false) {if (!isUserType) {return fileName.split('.').pop().toLowerCase()} else {return fileName.split('/').pop().toLowerCase()}},//获取文件名getFileName(url){return url.split('/').pop();},//预览handlePreview(index,list){const fileType = this.getFileType(list[index])//如果是不支持的文件类型或者是需要代替的缩略图的类型,则新标签页打开显示if (Object.keys(this.thumbnail).includes(fileType) || !this.fileTypeLimit.includes(fileType)) {uni.navigateTo({//跳转到pdf.vue页面url:"/packageProjectList/pdf/pdf?url="+list[index]})}else{//图片预览已经在其他文章中有例子this.$common.previewImage(index,list)}},
}

pdf.vue

<template><view><web-view :src="webViewSrc"></web-view></view>
</template><script>export default {data() {return {webViewSrc:''}},onLoad(option) {this.webViewSrc = option.url;},methods: {}}
</script><style></style>

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

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

相关文章

css-3:什么是响应式设计?响应式的原理是什么?如何做?

1、响应式设计是什么&#xff1f; 响应式网站设计&#xff08;Responsive WEB desgin&#xff09;是一个网络页面设计布局&#xff0c;页面的设计与开发应当根据用户行为以及设备环境&#xff08;系统平台、屏幕尺寸、屏幕定向等&#xff09;进行相应的相应和调整。 描述响应式…

ensp与虚拟机搭建测试环境

1.虚拟机配置 ①首先确定VMnet8 IP地址&#xff0c;若要修改IP地址&#xff0c;保证在启动Ensp前操作 ②尽量保证NAT模式 2.ensp配置 (1)拓扑结构 (2)Cloud配置 ①首先点击 绑定信息 UDP → 增加 ②然后点击 绑定信息 VMware ... → 增加 ③最后在 端口映射设置上点击双向通…

Hive创建外部表详细步骤

① 在hive中执行HDFS命令&#xff1a;创建/data目录 hive命令终端输入&#xff1a; hive> dfs -mkdir -p /data; 或者在linux命令终端输入&#xff1a; hdfs dfs -mkdir -p /data; ② 在hive中执行HDFS命令&#xff1a;上传/emp.txt至HDFS的data目录下&#xff0c;并命名为…

vue3+vue-i18n 监听语言的切换

最近在用 vue3 做一个后台管理系统&#xff0c;之前是只考虑中文&#xff0c;现在加了个需求是多语言。 本来也不是太难的需求&#xff0c;但是我用的并不熟悉&#xff0c;并且除了页面展示不同的语言&#xff0c;需求是在切换语言的时候在几个页面中需要做出一些自定义的行为&…

Openharmony重要特性之一浅析分布式软总线

OH分布式软总线 概述 简介分布式软总线的特征官方说明目录结构与代码说明分布式软总线使用 使用说明接口说明发现 发现的接口C++示例说明组网 组网的接口C++示例说明传输 软总线传输关键流程传输的接口注意事项一、概述 1.1 简介 ​ 分布式软总线能做什么? ​ 1.1 通过共享一…

50.两数之和(力扣)

目录 问题描述 核心代码解决 代码思想 时间复杂度和空间复杂度 问题描述 给定一个整数数组 和一个整数目标值 &#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。numstarget 你可以假设每种输入只会对应一个答案。但是&am…

jmeter工具测试和压测websocket协议【杭州多测师_王sir】

一、安装JDK配置好环境变量&#xff0c;安装好jmeter 二、下载WebSocketSampler发送请求用的&#xff0c;地址&#xff1a;https://bitbucket.org/pjtr/jmeter-websocket-samplers/downloads/?spma2c4g.11186623.2.15.363f211bH03KeI 下载解压后的jar包放到D:\JMeter\apache-j…

2.Flink应用

2.1 数据流 DataStream&#xff1a;DataStream是Flink数据流的核心抽象&#xff0c;其上定义了对数据流的一系列操作DataStreamSource&#xff1a;DataStreamSource 是 DataStream 的 起 点 &#xff0c; DataStreamSource 在StreamExecutionEnvironment 中 创 建 &#xff0c;…

计算机网络各层的功能以及常用协议

目录 1. 物理层&#xff08;Physical Layer&#xff09;2. 数据链路层&#xff08;Data Link Layer&#xff09;3. 网络层&#xff08;Network Layer&#xff09;4. 传输层&#xff08;Transport Layer&#xff09;5. 应用层&#xff08;Application Layer&#xff09; 计算机网…

init_pg_dir 的大小及作用

init_pg_dir 的大小 vmlinux.lds.S 中 在vmlinux.lds.S 中&#xff0c;有 init_pg_dir .; . INIT_DIR_SIZE; init_pg_end .;/*include/asm/kernel-pgtable.h*/ #define EARLY_ENTRIES(vstart, vend, shift) \ ((((vend) - 1) >&g…

基于 CentOS 7 构建 LVS-DR 群集

文章目录 前言1、LVS集群2、DR模式的工作流程图 一、LVS DR模式的配置二、配置步骤总结 前言 什么是LVS集群&#xff1f;DR模式&#xff1f; 1、LVS集群 LVS采用的是合入内核模块&#xff0c;先把对于nginx来说要稳定很多&#xff0c;性能和稳定都在一定层度上占据优势&…

【ChatGPT 指令大全】怎么使用ChatGPT写履历和通过面试

目录 怎么使用ChatGPT写履历 寻求履历的反馈 为履历加上量化数据 把经历修精简 为不同公司客制化撰写履历 怎么使用ChatGPT通过面试 汇整面试题目 给予回馈 提供追问的问题 用 STAR 原则回答面试问题 感谢面试官的 email 总结 在职场竞争激烈的今天&#xff0c;写一…

mysql从每个分组中取特定条件行的全部内容

取每个task_id分组中更新日期最新的一行 采用join的方式完成 select a.task_id,a.theme_id,a.time_unix from table_xxx a join (select task_id,max(time_unix) as max_timefrom table_xxxwhere date < ${date}and date > ${date} - 3and theme_i…

linux网络编程--线程池UDP

目录 学习目标 1线程池 2.UDP通信 3本地socket通信 学习目标 了解线程池模型的设计思想能看懂线程池实现源码掌握tcp和udp的优缺点和使用场景说出udp服务器通信流程说出udp客户端通信流程独立实现udp服务器代码独立实现udp客户端代码熟练掌握本地套接字进行本地进程通信 1…

FreeRTOS源码分析-10 互斥信号量

目录 1 事件标志组概念及其应用 1.1 事件标志组定义 1.2 FreeRTOS事件标志组介绍 1.3 FreeRTOS事件标志组工作原理 2 事件标志组应用 2.1 功能需求 2.2 API 2.3 功能实现 3 事件标志组原理 3.1 事件标志组控制块 3.2 事件标志组获取标志位 3.3 等待事件标志触发 3.4…

ESD接地实时监控系统有哪些功能

ESD接地实时监控系统是一种用于监测和维护静电放电&#xff08;ESD&#xff09;接地的设备和软件系统。静电放电事件可能会对敏感电子元件、设备或工作环境造成损害&#xff0c;因此对ESD接地进行有效的监控至关重要。 ESD接地实时监控系统主要包括以下几个方面的功能&#xf…

小程序的api使用 以及一些weui组件实列获取头像 扫码等

今日目标 响应式单位rpx小程序的生命周期 【重点】20%小程序框架 weui 【重点】 50%内置API 【重点】30%综合练习 1. 响应式rpx 1.1 rpx单位 rpx是微信小程序提出的一个尺寸单位&#xff0c;将整个手机屏幕宽度分为750份&#xff0c;1rpx 就是 1/750&#xff0c;避免不同手…

PCL 可视化球图形

文章目录 一、简介二、实现代码三、实现效果修改之处一、简介 过程很简单,使用pcl::visualization::PCLVisualizer中的addSphere函数就可以了,不过PCL中默认的球的分辨率过小,不够精细,需要我们手动修改一下源码。 二、实现代码 //标准文件 #include <iostream> #in…

QT自带PDF库的使用

QT自带PDF库可以方便的打开PDF文件&#xff0c;并将文件解析为QImage&#xff0c;相比网上提供的开源库&#xff0c;QT自带PDF库使用更方便&#xff0c;也更加可靠&#xff0c;然而&#xff0c;QT自带PDF库的使用却不同于其他通用库的使用&#xff0c;具备一定的技巧。 1. 安装…

以太网DHCP协议(十)

目录 一、工作原理 二、DHCP报文 2.1 DHCP报文类型 2.2 DHCP报文格式 当网络内部的主机设备数量过多是&#xff0c;IP地址的手动设置是一件非常繁琐的事情。为了实现自动设置IP地址、统一管理IP地址分配&#xff0c;TCPIP协议栈中引入了DHCP协议。 一、工作原理 使用DHCP之…