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

server/2025/3/18 9:04:26/

代码如下,复制粘贴即可食用:

<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.ppmy.cn/server/175923.html

相关文章

AtCoder Beginner Contest 397 A - D题解

Tasks - OMRON Corporation Programming Contest 2025 (AtCoder Beginner Contest 397) 本文为 AtCoder Beginner Contest 397 A - D题解 题目A: 代码(C): #include <bits/stdc.h>int main() {double n;std::cin >> n;if (n > 38.0) {std::cout << 1;}…

学习threejs,使用MeshLambertMaterial漫反射材质

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshLambertMaterial…

计算机网络基础:网络配置与管理

计算机网络基础&#xff1a;网络配置与管理 一、前言二、网络设备配置基础2.1 路由器配置2.1.1 路由器的基本概念2.1.2 路由器的初始配置2.1.3 路由器的接口配置2.1.4 路由配置 2.2 交换机配置2.2.1 交换机的基本概念2.2.2 交换机的初始配置2.2.3 交换机的端口配置2.2.4 VLAN 配…

盘库吧--搜索

网站介绍 网盘资源搜索&#xff0c;包含了百度、夸克、阿里、迅雷、115、天翼、UC 等网盘&#xff0c;支持链接有效性检测。 网站地址 https://panku8.com

如何进行技术选型?

前端技术发展速度快的看法 前端技术的更新换代确实非常快&#xff0c;几乎每年都会有新的框架、工具和最佳实践涌现。从 Vue 2 到 Vue 3、从 Webpack 到 Rspack/Vite、从 Redux 到 Zustand/Recoil&#xff0c;甚至前端工程化、微前端、Server Components 等方向也在快速演进。…

小程序网络大文件缓存方案

分享一个小程序网络大图加载慢的解决方案 用到的相关api getSavedFileList 获取已保存的文件列表&#xff1b;getStorageSync 获取本地缓存&#xff1b;downloadFile 下载网络图片&#xff1b;saveFile 保存文件到本地&#xff1b;setStorage 将数据储存到小程序本地缓存&…

电脑自动关机故障维修案例分享

电脑基本配置&#xff1a; C P U: AMD A10 9700 内存&#xff1a;8G 硬盘&#xff1a;金邦512G固态硬盘 主板&#xff1a;华硕 A320M-F 显卡&#xff1a;集成&#xff08;核心显卡&#xff09; 操作系统&#xff1a;Win10专业版 故障描述&#xff1a; 使用一段时间会黑屏…

边缘云原生操作系统的设计与思考

资料来源&#xff1a;火山引擎-开发者社区 边缘云行业现状和发展历程 从 06 年 AWS 推出 EC2 、S3 到今天已经过去了 18 年&#xff0c;云计算早已不是一个新鲜词汇&#xff0c;从当前业务来看&#xff0c;我们能看到云计算从中心到中心边缘的发展趋势&#xff0c;为什么会有 这…