uniapp+Vue3 开发小程序的下载文件功能

小程序下载文件,可以先预览文件内容,然后在手机上打开文件的工具中选择保存。

简单示例:(复制到HBuilder直接食用即可)

<template><view class="container-detail"><view class="example-body" @click="openFile(item.url)" v-for="(item, index) in fileList" :key="index"><image class="images" src="/common/images/files.png" mode="aspectFit"></image><view class="name">{{item.name}}</view></view></view>
</template><script setup>let fileList = ref([{"name":"file1.jpg","extname":"jpg","url":"https://images.dog.ceo/breeds/retriever-curly/n02099429_817.jpg",},{"name":"file2.jpg","extname":"jpg","url":"https://images.dog.ceo/breeds/doberman/n02107142_16400.jpg",},{"name":"somefile.pdf","extname":"pdf","url":"https://example.com/somefile.pdf",}])function openFile(url) {const isImgType = ['jpg', 'png', 'bmp', 'jpeg', 'webp']uni.showLoading({ title: '加载中...' })uni.downloadFile({url,success: (res) => {const fileType = res.tempFilePath.split('.').pop()if (isImgType.includes(fileType)) {uni.previewImage({ // 调用微信api预览图片showmenu: true, // 开启时右上角会有三点,点击可以保存urls: [res.tempFilePath],current: res.tempFilePath,success: (res) => {uni.hideLoading()console.log('打开图片成功')},fail: (res) => {uni.hideLoading()console.log(res)console.log('打开图片失败')},})} else {uni.openDocument({filePath: res.tempFilePath,showMenu: true, // 开启时右上角会有三点,点击可以保存success: (res) => {uni.hideLoading()console.log('打开文档成功')},fail: (res) => {uni.hideLoading()console.log(res)console.log('打开文档失败')},})}},fail: (e) => {uni.hideLoading()console.log(e)},})}</script><style lang="scss" scoped>
.container-detail {padding: 30rpx;.example-body {padding: 10rpx 0;display: flex;justify-content: space-between;align-items: center;margin-bottom: 32rpx;.images {width: 40rpx;height: 40rpx;image {width: 100%;height: 100%;}}.name {flex: 1;font-size: 28rpx;font-family: PingFang HK, PingFang HK-400;font-weight: 400;text-align: LEFT;color: royalblue;margin-left: 22rpx;}}
}
</style>

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

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

相关文章

电机控制常见面试问题(九)

文章目录 一、谈谈电机死区时间1.死区时间过短的后果&#xff1a;2.如何判断死区时间不足?3.解决方案 二、请描述对实时操作系统&#xff08;RTOS&#xff09;的理解三.解释FOC算法的原理并比较与其他无刷电机控制算法的优劣四.什么是电机堵转&#xff0c;如何避免电机堵转五.…

【分布式】聊聊分布式id实现方案和生产经验

对于分布式Id来说&#xff0c;在面试过程中也是高频面试题&#xff0c;所以主要针对分布式id实现方案进行详细分析下。 应用场景 对于无论是单机还是分布式系统来说&#xff0c;对于很多场景需要全局唯一ID&#xff0c; 数据库id唯一性日志traceId 可以方便找到日志链&#…

【性能测试】Jmeter如何做一份测试报告(3)

本篇文章主要介绍Jmeter中下载插件&#xff08;Jmeter Plugins&#xff09; 如何使用监听器插件&#xff0c;线程组插件&#xff0c;梯度压测线程组 测试报告需要去关注的数据&#xff0c;怎么看测试报告图表 目录 一&#xff1a;插件下载 1&#xff1a;下载地址 2&#xff…

cocos creator使用mesh修改图片为圆形,减少使用mask,j减少drawcall,优化性能

cocos creator版本2.4.11 一个mask占用drawcall 3个以上&#xff0c;针对游戏中技能图标&#xff0c;cd,以及多玩家头像&#xff0c;是有很大优化空间 1.上代码&#xff0c;只适合单独图片的&#xff0c;不适合在图集中的图片 const { ccclass, property } cc._decorator;c…

AI重构SEO关键词布局

内容概要 在搜索引擎优化&#xff08;SEO&#xff09;领域&#xff0c;AI技术的深度应用正在颠覆传统关键词布局逻辑。通过机器学习算法与语义分析模型&#xff0c;智能系统能够实时解析海量搜索数据&#xff0c;构建动态词库并精准捕捉用户意图。相较于依赖人工经验的关键词筛…

泛微ecode的页面开发发送请求参数携带集合

1.在开发过程中我们难免遇见会存在需要将集合传递到后端的情况&#xff0c;那么这里就有一些如下的注意事项&#xff0c;如以下代码&#xff1a; // 新增action.boundasync addQuestion(formData) {var theList this.questionAnswerList;var questionAnswerListArray new Ar…

20250212:linux系统DNS解析卡顿5秒的bug

问题: 1:人脸离线识别记录可以正常上传云端 2:人脸在线识别请求却一直超时 3:客户使用在线网络 思路:

道路运输安全员考试:备考中的心理调适与策略

备考道路运输安全员考试&#xff0c;心理调适同样重要。考试压力往往会影响考生的学习效率和考试发挥。​ 首先&#xff0c;要正确认识考试压力。适度的压力可以激发学习动力&#xff0c;但过度的压力则会适得其反。当感到压力过大时&#xff0c;要学会自我调节。可以通过运动…

LLM - 白话RAG(Retrieval-Augmented Generation)

文章目录 Pre一、大模型的"幻觉"之谜1.1 何为"幻觉"现象&#xff1f;1.2 专业场景的致命挑战 二、RAG技术解析&#xff1a;给大模型装上"知识外挂"2.1 核心原理&#xff1a;动态知识增强2.2 技术实现三部曲 三、RAG vs 微调&#xff1a;技术选型…

探索现代 C++:新特性、工程实践与热点趋势

目录 一、现代 C 的关键特性与热点关联 二、精简代码示例解析 三、工程实践中的应用思考 四、总结与展望 近几年&#xff0c;人工智能、边缘计算与跨语言开发成为技术热点&#xff0c;而 C 作为高性能系统编程的主力军&#xff0c;也在不断进化。从 C11 到 C20&#xff0c;…

《HTML + CSS + JS 打造炫酷轮播图详解》

《HTML CSS JS 打造炫酷轮播图详解》 一、项目概述 本次项目旨在使用 HTML、CSS 和 JavaScript 实现一个具有基本功能的轮播图&#xff0c;包括图片自动轮播、上一张 / 下一张按钮切换、小圆点指示与切换等功能&#xff0c;以提升网页的交互性和视觉吸引力。 二、实现步骤…

257. 二叉树的所有路径(递归+回溯)

257. 二叉树的所有路径 力扣题目链接(opens new window) 给定一个二叉树&#xff0c;返回所有从根节点到叶子节点的路径。 说明: 叶子节点是指没有子节点的节点。 示例: 思路&#xff1a;在叶子节点收割结果&#xff0c;如果不是叶子节点&#xff0c;则依次处理左右子树&a…

【架构差异】SpringとSpringBoot:Bean机制的深入剖析与自动配置原理

目录标题 SpringBoot框架中Bean机制的深入剖析与自动配置原理摘要1. 引言2. SpringBoot与Spring的架构差异2.1 从Spring到SpringBoot的演进2.2 SpringBoot中的Bean容器体系 3. SpringBoot的自动配置机制3.1 SpringBootApplication解析3.2 自动配置原理深度解析3.2.1 自动配置类…

CSDN博客:Markdown编辑语法教程总结教程(中)

❤个人主页&#xff1a;折枝寄北的博客 Markdown编辑语法教程总结 前言1. 列表1.1 无序列表1.2 有序列表1.3 待办事项列表1.4 自定义列表 2. 图片2.1 直接插入图片2.2 插入带尺寸的图片2.3 插入宽度确定&#xff0c;高度等比例的图片2.4 插入高度确定宽度等比例的图片2.5 插入居…

ChebyKAN0、ChebyKAN1 网络阅读

目录 ChebyKAN0 Chebyshev Polynomial-Based Kolmogorov-Arnold Networks: An Efficient Architecture for Nonlinear Function Approximation 参考文献 文章内容 文章详细结构 5. Experiments and Results 5.1 Digit Classification on MNIST 5.2 Function Approximat…

RK3588部署YOLOv8(2):OpenCV和RGA实现模型前处理对比

目录 前言 1. 结果对比 1.1 时间对比 1.2 CPU和NPU占用对比 2. RGA实现YOLO前处理 2.1 实现思路 2.2 处理类的声明 2.3 处理类的实现 总结 前言 RK平台上有RGA (Raster Graphic Acceleration Unit) 加速&#xff0c;使用RGA可以减少资源占用、加速图片处理速度。因此…

破局者登场:中国首款AI原生IDE Trae深度解析--开启人机协同编程新纪元

摘要 字节跳动于2025年3月3日正式发布中国首款AI原生集成开发环境Trae国内版&#xff0c;以动态协作、全场景AI赋能及本土化适配为核心优势。Trae内置Doubao-1.5-pro与DeepSeek R1/V3双引擎&#xff0c;支持基于自然语言生成端到端代码框架、实时上下文感知与智能Bug修复&…

【PyCharm】Python和PyCharm的相互关系和使用联动介绍

李升伟 整理 Python 是一种广泛使用的编程语言&#xff0c;而 PyCharm 是 JetBrains 开发的专门用于 Python 开发的集成开发环境&#xff08;IDE&#xff09;。以下是它们的相互关系和使用联动的介绍&#xff1a; 1. Python 和 PyCharm 的关系 Python&#xff1a;一种解释型、…

SNIPAR:快速实现亲缘个体的基因型分离与推断

SNIPAR&#xff1a;快速实现亲缘个体的基因型分离与推断 近日&#xff0c;英国剑桥大学研究团队在Nature Genetics上发表了最新研究成果——SNIPAR&#xff08;SNP-based Inference of Pedigree relationship, Ancestry, and Recombination&#xff09;。这一强大的工具可以帮助…

3.11记录

leetcode刷题&#xff1a; 1. 334. 递增的三元子序列 - 力扣&#xff08;LeetCode&#xff09; 方法一&#xff1a;使用贪心算法求解 class Solution(object):def increasingTriplet(self, nums):first nums[0]second float(inf)for i in nums:if i>second:return Truee…