当前位置: 首页 > news >正文

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>

相关文章:

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

<template> <view class"approval-notice"><block v-for"(imgItem, idx) in drivingLicense" :key"idx">//如果是非图片&#xff0c;那就走pdf预览<view class"pdf-item" v-if"Object.keys(thumbnail).incl…...

SpringBoot 的事务及使用

一、事务的常识 1、事务四特性&#xff08;ACID&#xff09; A 原子性&#xff1a;事务是最小单元,不可再分隔的一个整体。C 一致性&#xff1a;事务中的方法要么同时成功,要么都不成功,要不都失败。I 隔离性&#xff1a;多个事务操作数据库中同一个记录或多个记录时,对事务进…...

Android中的ABI

Android中的ABI ABI是Application Binary Interface的缩写。 ABI常表示两个程序模块之间的接口&#xff0c;且其中一个模块常为机器码级别的library或操作系统。 ABI定义了函数库的调用、应用的二进制文件&#xff08;尤其是.so&#xff09;如何运行在相应的系统平台上等细节…...

Python爬虫在用户行为模型构建中的应用与挑战

嗨&#xff0c;大家好&#xff01;作为一名专业的爬虫代理&#xff0c;我今天要和大家分享一些关于爬虫与人类行为分析的知识。在数字化时代&#xff0c;我们每天都在互联网上留下大量的数据痕迹&#xff0c;通过分析这些数据&#xff0c;我们可以理解用户行为、性偏好和需求&a…...

LangChain与大模型的学习

这里写目录标题 问题记录1、库的版本问题 实例记录1、公司名生成2 提示模板的使用3LLM Chain 参考资料 问题记录 1、库的版本问题 openai.error.APIConnectionError: Error communicating with OpenAI: HTTPSConnectionPool(hostapi.openai.com, port443): Max retries excee…...

C语言标准定义的32个关键字

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。 …...

PE半透明屏是怎么制造的?工艺、材料、应用

PE半透明屏是一种新型的屏幕材料&#xff0c;具有半透明的特点。 它由聚乙烯&#xff08;PE&#xff09;材料制成&#xff0c;具有良好的透明度和柔韧性。PE半透明屏广泛应用于建筑、广告、展览等领域&#xff0c;具有很高的市场潜力。 PE半透明屏的特点之一是其半透明性。 它…...

linux文本三剑客---grep,sed,awk

目录 grep 什么是grep&#xff1f; grep实例演示 命令参数&#xff1a; 案例演示&#xff1a; sed 概念&#xff1a; 常用选项&#xff1a; 案例演示&#xff1a; awk 概念&#xff1a; awk常用命令选项&#xff1a; awk变量&#xff1a; 内置变量 自定义变量 a…...

leaflet-uniapp 缩放地图的同时 显示当前缩放层级

记录实现过程&#xff1a; 需求为移动端用户在使用地图时&#xff0c;缩放地图的同时&#xff0c;可以获知地图此时缩放的级别。 效果图如下&#xff1a;此时缩放地图级别为13 map.on() 有对应的诸多行为 查看官网即可&#xff0c;这里根据需要为--zoomstart zoom zoomend 代…...

[Securinets CTF Quals 2023] Admin Service,ret2libc,One is enough

只作了3个pwn&#xff0c;第4个附件没下下来&#xff0c;第5个不会 Admin Service 这是个最简单的题&#xff0c;最后来弄出来。原来只是看过关于maps文件的&#xff0c;一直没什么印象。 题目一开始设置seccomp禁用execv等&#xff0c;看来是用ORW&#xff0c;然后建了个mm…...

计算机组成原理-笔记-第二章

二、第二章——数据的表示和运算 1、进位制度&#xff08;二进制、十进制&#xff09; 2、BCD码&#xff08;余三码、2421码&#xff09; 编码方式 功能 好处 弊处 BCD码 将每个十进制数码转换为4位二进制码 精度高&#xff0c;适合直接用于数码管或LED等显示设备 编码…...

mysql大量数据导入记要

需求描述 在工作中经历过两个项目要对数据库中的数据做大量数据的导出&#xff0c;转换和导入的工作。对于不涉及数据格式转换的导出导入工作&#xff0c;一般都是数据的备份。这个工作一般都由DBA搞定。对于要进行格式转换的工作&#xff0c;一般还是要由程序员参与。除非DBA…...

极狐GitLab 全新「价值流仪表盘」使用指南

本文来源&#xff1a;about.gitlab.com 作者&#xff1a;Haim Snir 译者&#xff1a;极狐(GitLab) 市场部内容团队 GitLab / 极狐GitLab 价值流仪表盘的使用相对简单&#xff0c;这种可以定制化的仪表盘能够让决策者识别数字化转型进程中的趋势及机遇。 如果你已经在用 GitLab…...

通过logrotate实现nginx容器内日志按天存储

场景 最近底层api需要上集群&#xff0c;于是用nginx做了转发&#xff0c;但是随着时间的增长&#xff0c;nginx的日志越来越大&#xff0c;磁盘空间也顶不住了&#xff0c;于是需要对日志进行分割&#xff0c;由于nginx原生是不支持日志按天存储和分割的&#xff0c;网上也介…...

广东珠海电子行业导入MES系统需要注意什么

一、电子行业工厂的生产特征 1.高度自动化&#xff1a; 电子行业的生产车间大多采用高度自动化的生产设备制造工艺。自动化流水线能够实现高效、精准和连续的生产过程&#xff0c;提升产品完整性和生产率。 2.多样化和个性化定制需求&#xff1a; 电子产品市场的需求多样化&…...

小红书2023/08/06Java后端笔试 AK

T1&#xff08;模拟、哈希表&#xff09; #include <bits/stdc.h>using namespace std;typedef long long LL; typedef pair<string, int> PSI;const int N 1e5 10;void solve() {string line, t;getline(cin, line);line ;vector<PSI> ans;unordered_m…...

3、有序数组的平方

有一个有序数组从大到小排列&#xff1a;-10 -5 1 2 3 4&#xff0c;将他们的每一项平方&#xff0c;然后再形成新的有序数组。 解法&#xff1a;双指针 因为前面是负数&#xff0c;后面是正数&#xff0c;平方和的最大值一定是从两端取得&#xff0c;所以可以定义一个头指针和…...

用于自然语言处理 (NLP) 的 MLOps

介绍 自然语言处理( NLP )的人工智能关注的是计算机和人们如何用日常语言进行交流。鉴于 NLP 模型在生产系统中的部署,我们需要简化 NLP 应用程序的不断使用,从而使 MLOps(机器学习操作)对 NLP 有所帮助。在生产系统中自动创建、训练、测试和部署 NLP 模型是 MLOps for …...

C#抽象静态方法

抽象静态方法 在C# 11中&#xff0c;引入了对抽象静态接口成员的支持。这个特性可以让你在接口中定义静态抽象方法、属性、或事件。具体来说&#xff0c;一个接口可以定义一个或多个抽象静态成员&#xff0c;这些成员没有具体的实现。任何实现该接口的类或结构必须提供这些成员…...

小研究 - Mysql快速全同步复制技术的设计和应用(一)

Mysql半同步复制技术在高性能的数据管理中被广泛采用&#xff0c;但它在可靠性方面却存在不足.本文对半同步复制技术进行优化&#xff0c;提出了一种快速全同步复制技术&#xff0c;通过对半同步数据复制过程中的事务流程设置、线程资源合理应用、批量日志应用等技术手段&#…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...