小程序附件下载并预览功能

一、实现的功能:

1、word、excel、图片等实现下载并预览

2、打开文件后显示文件名称

二、代码:

// 判断文件类型whatFileType(url) {let sr = url.lastIndexOf("."); //  最后一次出现的位置let fileType = url.substr(sr + 1); // 截取url的类型return fileType;},// 下载文件/*** 本地文件存储的大小限制为 10M*/handleDownloadFile(e) {let fileTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"];let imageTypes = ["jpg", "jpeg", "png"];let fileType = this.whatFileType(e.target.dataset.fileurl);let fileName = imageTypes.includes(fileType) ? "" : e.target.dataset.name;const timestamp = Date.parse(new Date());wx.showLoading({title: "加载中",});wx.getSavedFileList({// 获取文件列表success(res) {res.fileList.forEach((val, key) => {// 遍历文件列表里的数据// 删除存储的垃圾数据wx.removeSavedFile({filePath: val.filePath,});});},});wx.downloadFile({url: e.target.dataset.fileurl,filePath: fileTypes.includes(fileType)? wx.env.USER_DATA_PATH + "/" + timestamp + fileName: wx.env.USER_DATA_PATH + "/" + "." + fileType,method: "GET",success: function (res) {if (fileTypes.includes(fileType)) {wx.openDocument({filePath: res.filePath,showMenu: true,flieType: fileType,success: function (res) {wx.hideLoading();},fail: function (err) {wx.hideLoading();},});} else if (imageTypes.includes(fileType)) {wx.hideLoading();wx.previewImage({showmenu: true,current: res.filePath, // 当前显示图片的http链接urls: [res.filePath], // 需要预览的图片http链接列表});} else {wx.hideLoading();wx.showModal({title: "提示",content: "文件类型不支持预览",showCancel: false,});}},fail: function (err) {wx.hideLoading();wx.showToast({title: "下载超时",icon: "none",});},});},

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

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

相关文章

超越传统测试:如何构建可靠的持续集成测试管道

超越传统测试:如何构建可靠的持续集成测试管道 引言 持续集成测试是现代软件开发中至关重要的一环,它可以帮助团队及时发现和解决代码问题,提高软件质量。然而,传统的测试方法往往存在效率低、容易出错等问题。本篇博客将介绍如…

Java接口通过token登录实现页面跳转到登录成功后的页面

首先,你需要在接口请求中将token作为参数传递给后端,后端需要对token进行验证并获取登录用户的信息。 在验证通过后,你可以将登录成功后的页面链接返回给前端,前端通过跳转到该链接来实现页面跳转。 以下是一个简单的Java代码演…

手机图片转pdf?两种方法介绍

手机图片转pdf?如今,随着生活的数字化,我们的手机中储存了大量的照片。但是,如果需要将这些照片转换成PDF格式,该怎么办呢?下面,小编就给大家介绍三种方法来实现这一目标。 第一种方法&#xff…

12页线性代数图解教程,github星标9.1k,适合小白

线性代数“困难户”注意,今天我给大家分享一个超适合小白的线性代数学习笔记,只有12页纸,一半都是图解,不用担心看不懂。 这份笔记名为《线性代数的艺术》,是日本学者Kenji Hiranabe基于Gilbert Strang教授的《每个人…

JS常用操作数组的方法整理

JavaScript提供了许多用于操作数组的方法。以下是其中一些常见的方法: 1. push() : 将一个或多个元素添加到数组的末尾,并返回新数组的长度。 2. pop() : 移除并返回数组的最后一个元素。 3. unshift() : 将一个或多个元素添加到数组的开头&#xff0…

【Pytorch学习】pytorch中的isinstance() 函数

描述 isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type()。 isinstance() 与 type() 区别: type() 不会认为子类是一种父类类型,不考虑继承关系。 isinstance() 会认为子类是一种父类类型,考虑继承关系。 如果要判…

Lambda表达式常见的Local variable must be final or effectively final原因及解决办法

目录 Local variable must be final or effectively final错误原因 解决办法按照要求定义为final(不符合实情,很多时候是查库获取的变量值)使用原子类存储变量,保证一致性AtomicReference常用原子类 其它 Local variable must be …

为什么要有虚拟内存?

操作系统是通过内存分段和内存分页的方式管理虚拟内存地址和物理内存地址之间的关系 内存分段 程序是由若干个逻辑分段组成的,代码分段、数据分段、栈段、堆段组成,不同的段有不同的属性,所以就用分段的形式分离开。 分段机制下的虚拟内存…

JVM理论(七)性能监控与调优

概述 性能优化的步骤 性能监控:就是通过以非强行或入侵方式收集或查看应用程序运行状态,包括如下问题 GC频繁CPU过载过高OOM内存泄漏死锁程序响应时间较长性能分析:通常在系统测试环境或者开发环境进行分析 通过查看程序日志以及GC日志,或者运用命令行工…

《零基础入门学习Python》第070讲:GUI的终极选择:Tkinter7

上节课我们介绍了Text组件的Indexs 索引和 Marks 标记,它们主要是用于定位,Marks 可以看做是特殊的 Indexs,但是它们又不是完全相同的,比如在默认情况下,你在Marks指定的位置中插入数据,Marks 的位置会自动…

yaml语法详解

#kv #对空格的严格要求十分高 #注入到我们的配置类中 #普通的keyvalue name: qinjiang#对象 student:name: qingjiangage: 3#行内写法 student1: {name: qinjiang,age: 3}#数组 pets:- cat- dog- pigpet: [cat,dog,pig]yaml可以给实体类赋值 person:name: kuangshenage: 19happ…

Android onTouchEvent方法不触发ACTION_UP的解决方法

Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN://触摸、按下setImageResource(R.mipmap.ic_music);break;case MotionEvent.ACTION_UP://抬起setImageResource(R.mipmap.ic_launcher);break;}return sup…

ERROR 1064 - You have an error in your SQL syntax;

ERROR 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near (/, 少个逗号吧,以前开始写SQL,特别是修改SQL的时候容易出现这样错误。 而且自己也知道在附近…

前端异常错误处理(包括但不限于react,vue)

错误异常发生 页面js报错请求报错页面资源加载报错promise异常iframe加载异常页面奔溃&卡顿异常 处理异常的方法 1、react 自带的errorBoundaries 2、 react 自定义Hooks 3、 vue errorHandler 4、try catch 对特定的代码进行捕获 5、window.addEventListerner …

【深度学习】日常笔记15

训练集和测试集并不来⾃同⼀个分布。这就是所谓的分布偏移。 真实⻛险是从真实分布中抽取的所有数据的总体损失的预期,然⽽,这个数据总体通常是⽆法获得的。计算真实风险公式如下: 为概率密度函数 经验⻛险是训练数据的平均损失,⽤…

【MySQL主从复制】

目录 一、MySQL Replication 1.概述 2.优点 二、MySQL复制类型 1.异步复制(Asynchronous repication) 2.全同步复制(Fully synchronous replication) 3.半同步复制(Semisynchronous replication) 三…

【Rust 基础篇】Rust FFI:连接Rust与其他编程语言的桥梁

导言 Rust是一种以安全性和高效性著称的系统级编程语言,具有出色的性能和内存安全特性。然而,在现实世界中,我们很少有项目是完全用一种编程语言编写的。通常,我们需要在项目中使用多种编程语言,特别是在与现有代码库…

ava版知识付费平台免费搭建 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台

提供私有化部署,免费售后,专业技术指导,支持PC、APP、H5、小程序多终端同步,支持二次开发定制,源码交付。 Java版知识付费-轻松拥有知识付费平台 多种直播形式,全面满足直播场景需求 公开课、小班课、独…

Rust ESP32C3开发

Rust ESP32C3开发 系统开发逐步使用Rust语言,在嵌入式领域Rust也逐步完善,本着学习Rust和ESP32的目的,搭建了ESP32C3的环境,过程中遇到了不少问题,予以记录。 ESP-IDF开发ESP32 这一部分可跳过,是使用C开…

tensorflow错误及解决办法

tf.graph 节点没有数据 tensorflow.python.framework.errors_impl.InvalidArgumentError: Retval[2] does not have value.通过TensorFlow Retval[0] does not have value启发,怀疑是通过tf.cond构建网络图的时候,一次只走一个分支,导致另一…