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">//如果是非图片,那就走pdf预览<view class"pdf-item" v-if"Object.keys(thumbnail).incl…...
SpringBoot 的事务及使用
一、事务的常识 1、事务四特性(ACID) A 原子性:事务是最小单元,不可再分隔的一个整体。C 一致性:事务中的方法要么同时成功,要么都不成功,要不都失败。I 隔离性:多个事务操作数据库中同一个记录或多个记录时,对事务进…...
Android中的ABI
Android中的ABI ABI是Application Binary Interface的缩写。 ABI常表示两个程序模块之间的接口,且其中一个模块常为机器码级别的library或操作系统。 ABI定义了函数库的调用、应用的二进制文件(尤其是.so)如何运行在相应的系统平台上等细节…...
Python爬虫在用户行为模型构建中的应用与挑战
嗨,大家好!作为一名专业的爬虫代理,我今天要和大家分享一些关于爬虫与人类行为分析的知识。在数字化时代,我们每天都在互联网上留下大量的数据痕迹,通过分析这些数据,我们可以理解用户行为、性偏好和需求&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,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和技术。 …...
PE半透明屏是怎么制造的?工艺、材料、应用
PE半透明屏是一种新型的屏幕材料,具有半透明的特点。 它由聚乙烯(PE)材料制成,具有良好的透明度和柔韧性。PE半透明屏广泛应用于建筑、广告、展览等领域,具有很高的市场潜力。 PE半透明屏的特点之一是其半透明性。 它…...
linux文本三剑客---grep,sed,awk
目录 grep 什么是grep? grep实例演示 命令参数: 案例演示: sed 概念: 常用选项: 案例演示: awk 概念: awk常用命令选项: awk变量: 内置变量 自定义变量 a…...
leaflet-uniapp 缩放地图的同时 显示当前缩放层级
记录实现过程: 需求为移动端用户在使用地图时,缩放地图的同时,可以获知地图此时缩放的级别。 效果图如下:此时缩放地图级别为13 map.on() 有对应的诸多行为 查看官网即可,这里根据需要为--zoomstart zoom zoomend 代…...
[Securinets CTF Quals 2023] Admin Service,ret2libc,One is enough
只作了3个pwn,第4个附件没下下来,第5个不会 Admin Service 这是个最简单的题,最后来弄出来。原来只是看过关于maps文件的,一直没什么印象。 题目一开始设置seccomp禁用execv等,看来是用ORW,然后建了个mm…...
计算机组成原理-笔记-第二章
二、第二章——数据的表示和运算 1、进位制度(二进制、十进制) 2、BCD码(余三码、2421码) 编码方式 功能 好处 弊处 BCD码 将每个十进制数码转换为4位二进制码 精度高,适合直接用于数码管或LED等显示设备 编码…...
mysql大量数据导入记要
需求描述 在工作中经历过两个项目要对数据库中的数据做大量数据的导出,转换和导入的工作。对于不涉及数据格式转换的导出导入工作,一般都是数据的备份。这个工作一般都由DBA搞定。对于要进行格式转换的工作,一般还是要由程序员参与。除非DBA…...
极狐GitLab 全新「价值流仪表盘」使用指南
本文来源:about.gitlab.com 作者:Haim Snir 译者:极狐(GitLab) 市场部内容团队 GitLab / 极狐GitLab 价值流仪表盘的使用相对简单,这种可以定制化的仪表盘能够让决策者识别数字化转型进程中的趋势及机遇。 如果你已经在用 GitLab…...
通过logrotate实现nginx容器内日志按天存储
场景 最近底层api需要上集群,于是用nginx做了转发,但是随着时间的增长,nginx的日志越来越大,磁盘空间也顶不住了,于是需要对日志进行分割,由于nginx原生是不支持日志按天存储和分割的,网上也介…...
广东珠海电子行业导入MES系统需要注意什么
一、电子行业工厂的生产特征 1.高度自动化: 电子行业的生产车间大多采用高度自动化的生产设备制造工艺。自动化流水线能够实现高效、精准和连续的生产过程,提升产品完整性和生产率。 2.多样化和个性化定制需求: 电子产品市场的需求多样化&…...
小红书2023/08/06Java后端笔试 AK
T1(模拟、哈希表) #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、有序数组的平方
有一个有序数组从大到小排列:-10 -5 1 2 3 4,将他们的每一项平方,然后再形成新的有序数组。 解法:双指针 因为前面是负数,后面是正数,平方和的最大值一定是从两端取得,所以可以定义一个头指针和…...
用于自然语言处理 (NLP) 的 MLOps
介绍 自然语言处理( NLP )的人工智能关注的是计算机和人们如何用日常语言进行交流。鉴于 NLP 模型在生产系统中的部署,我们需要简化 NLP 应用程序的不断使用,从而使 MLOps(机器学习操作)对 NLP 有所帮助。在生产系统中自动创建、训练、测试和部署 NLP 模型是 MLOps for …...
C#抽象静态方法
抽象静态方法 在C# 11中,引入了对抽象静态接口成员的支持。这个特性可以让你在接口中定义静态抽象方法、属性、或事件。具体来说,一个接口可以定义一个或多个抽象静态成员,这些成员没有具体的实现。任何实现该接口的类或结构必须提供这些成员…...
小研究 - Mysql快速全同步复制技术的设计和应用(一)
Mysql半同步复制技术在高性能的数据管理中被广泛采用,但它在可靠性方面却存在不足.本文对半同步复制技术进行优化,提出了一种快速全同步复制技术,通过对半同步数据复制过程中的事务流程设置、线程资源合理应用、批量日志应用等技术手段&#…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建
【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例,Webpack.config.js它可能的配置和含义如下: 前言 Module Federation 的Webpack.config.js核心配置包括: name filename(定义应用标识) remotes(引用远程模块࿰…...
