当前位置: 首页 > 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;通过对半同步数据复制过程中的事务流程设置、线程资源合理应用、批量日志应用等技术手段&#…...

AI 时代做自媒体,他从方法论上就赢了绝大部分人

AI 时代做自媒体,他从方法论上就赢了绝大部分人 昨天刷到卡兹克的一篇文章,他分享了自己做内容三年总结的 10 条方法论。 看完之后我的感受是:这哥们从方法论上就赢了。 简单介绍一下卡兹克。他的公众号「数字生命卡兹克」是 AIGC 领域的头部 IP,新榜 AI 行业公众号排名…...

Comsol 热 - 流 - 固 - 损伤耦合模拟分析:THMD 模型实践

Comsol热-流-固-损伤耦合模拟分析&#xff0c;THMD热-流-固-损伤耦合模型&#xff0c;在这个模型里面考虑了温度场、应力场、压力场和损伤场&#xff0c;采用的是Comsol内置的接口建模 整个模型呈正方形&#xff0c;内部开一个圆孔 在圆孔内壁施加高压低温流体&#xff0c;模型…...

零基础玩转AutoGLM-Phone-9B:图文语音多模态AI,5分钟快速部署指南

零基础玩转AutoGLM-Phone-9B&#xff1a;图文语音多模态AI&#xff0c;5分钟快速部署指南 1. AutoGLM-Phone-9B简介 1.1 什么是AutoGLM-Phone-9B AutoGLM-Phone-9B是一款专为移动设备优化的多模态AI模型&#xff0c;它能同时处理文字、图片和语音三种信息。想象一下&#xf…...

国产AI Agent爆发:从“龙虾风暴”看企业级Agent工具选型与实战指南

摘要&#xff1a; 作为一名在企业架构领域摸爬滚打15年的老兵&#xff0c;我见证了从SOA到微服务&#xff0c;再到如今AI原生架构的数次演进。2026年3月底&#xff0c;国内AI圈掀起的“龙虾风暴”标志着Agent工具正式进入爆发期。然而&#xff0c;对于IT负责人和CIO而言&#x…...

intv_ai_mk11惊艳输出集:RAG技术通俗解释、电商详情页开头、朋友圈爆款文案

intv_ai_mk11惊艳输出集&#xff1a;RAG技术通俗解释、电商详情页开头、朋友圈爆款文案 1. 什么是intv_ai_mk11 AI对话机器人 intv_ai_mk11是一款基于7B参数Llama架构的AI对话助手&#xff0c;运行在GPU服务器上。它能够理解自然语言并生成高质量的文本回复&#xff0c;适用于…...

【 Claw-Code】 技术深度解析:Claude Code Agent Harness 的开源重实现

文章目录Claw-Code 技术深度解析&#xff1a;Claude Code Agent Harness 的开源重实现一、引言二、项目背景与定位2.1 为什么是"洁室重实现"2.2 项目核心目标三、双语言架构设计3.1 双语言实现对比3.2 Rust Workspace 模块划分四、核心组件解析4.1 运行时&#xff08…...

从设计到上线:基于快马平台开发一个具备完整功能的qclaw官网实战指南

从设计到上线&#xff1a;基于快马平台开发一个具备完整功能的qclaw官网实战指南 最近接手了一个qclaw官网的开发需求&#xff0c;需要从零开始构建一个具备完整功能的官方网站。经过调研&#xff0c;我选择了InsCode(快马)平台作为开发环境&#xff0c;因为它不仅提供了完整的…...

扩散模型对抗样本经典baselines

1. 流图&#xff1a;数据的河流 如果把传统的堆叠面积图想象成一块块整齐堆叠的积木&#xff0c;那么流图就像一条蜿蜒流淌的河流&#xff0c;河道的宽窄变化自然流畅&#xff0c;波峰波谷过渡平滑。 它特别适合展示多个类别数据随时间的变化趋势&#xff0c;尤其是当你想强调整…...

嵌入式开发语言选择:C与C++的实战对比

1. 嵌入式开发语言选择的核心考量在嵌入式系统开发领域&#xff0c;C和C的争论已经持续了数十年。作为一名在工业控制和消费电子领域工作多年的嵌入式工程师&#xff0c;我见证了从8位单片机到多核处理器的演进过程。选择开发语言绝非简单的技术偏好问题&#xff0c;而是需要综…...

收藏备用|小白/程序员必看!Agentic AI时代,手把手教你构建高效可靠AI Agent

在Agentic AI飞速迭代的当下&#xff0c;AI Agent已成为大模型落地的核心载体&#xff0c;不少小白程序员和入行开发者都想抓住这一风口&#xff0c;但常常陷入“不知从何下手”的困境。本文将从实操角度&#xff0c;详细拆解构建可靠高效AI Agent应用的全流程&#xff0c;核心…...