微信小程序中的文件查看方法

news2024/10/22 6:37:38

获得后缀名判断类型,如果是图片用ex.previewImage(),如果是视频,用uni.previewMedia(),如果是word文档这些的,用 uni.downloadFile来下载资源后用 uni.saveFile来保存到本地,uni.openDocument来打开新的网页,如果打不开的话则返回说到PC端去打开

 const lookFile = (url) => {
  let index = url.lastIndexOf('.');
  let filttype = url.slice(index + 1);
  if (url.includes('?token')) {
    filttype = url.split('?token')[0].split('.').slice(-1);
  }
  uni.showLoading({
    title: '加载中',
    mask: true,
  });
  if (['bmp', 'jpg', 'jpeg', 'png', 'gif', 'image'].some((item) => item == filttype)) {
    uni.previewImage({
      current: url, // 当前显示图片的 http 链接
      urls: [url], // 需要预览的图片 http 链接列表
      success() {
        uni.hideLoading();
      },
    });
  } else if (['mp4', 'avi'].some((item) => item == filttype)) {
    uni.previewMedia({
      sources: [
        {
          url,
          type: 'video',
        },
      ], // 需要预览的资源列表
      current: 1, // 当前显示的资源序号,
      success() {
        uni.hideLoading();
      },
      fail: function (err) {
        uni.showToast({
          title: '播放失败',
          icon: 'none',
        });
        console.log(err);
      },
    });
  } else if (['zip', 'rar'].some((item) => item == filttype)) {
    uni.showToast({
      title: '暂不支持预览',
      icon: 'none',
    });
  } else {
    uni.downloadFile({
      //下载
      url, // 从后端获取的url地址,赋值在标签的data属性上
      header: {
        token: uni.getStorageSync('token'),
        'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
      },
      success: function (res) {
        const tempFilePath = res.tempFilePath;
        uni.openDocument({
          //新开页面打开文档
          filePath: tempFilePath,
          showMenu: true,
          fileType: filttype,
          success: function (res) {
            console.log('打开文档成功');
          },
          fail: function (err) {
            console.log('打开文档失败', err);
          },
          complete: () => {
            uni.hideLoading();
          },
        });
        /* uni.saveFile({
          //保存文件到本地
          tempFilePath,
          success(res) {
            const savedFilePath = res.savedFilePath;
            const filttypeName = filttype;
            uni.openDocument({
              //新开页面打开文档
              filePath: savedFilePath,
              showMenu: true,
              fileType: filttypeName,
              success: function (res) {
                console.log('打开文档成功');
              },
              fail: function (err) {
                console.log('打开文档失败', err);
              },
              complete: () => {
                uni.hideLoading();
              },
            });
          },
        }); */
      },
      fail: function (err) {
        uni.showToast({
          title: '下载失败',
          icon: 'none',
        });
        console.log(err);
      },
    });
  }
};

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

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

相关文章

查缺补漏----数据结构树高总结

① 对于平衡二叉树而言,树高的规律: 高度为h的平衡二叉树的含有的最少结点数(所有非叶节点的平衡因子均为1): n01,n11,n22 含有的最多结点数: (高度为h的满二叉树含有的结点数) ②…

监控内容、监控指标、监控工具大科普

在现代信息技术领域,监控技术扮演着至关重要的角色。它帮助我们实时了解系统、网络、应用以及环境的状态,确保它们的安全、稳定和高效运行。以下是对监控内容、监控指标和监控工具的详细科普。 一、监控内容 监控内容是指监控系统所关注和记录的具体信…

C++面向对象编程学习

C面向对象编程学习 前言一、C面向对象编程二、知识点学习1. 定义一个类1.1 使用struct定义1.2 使用class定义1.3 struct和class的区别 2. 类的定义方式2.1 单文件定义(Inline Definition)2.2 分离定义(Separate Definition)2.3 头…

一文2500字从0到1实现压测自动化!

大家好,我是小码哥,最近工作有点忙,一直在实现压测自动化的功能,今天来分享一下实现思路 我所在的业务线现在项目比较少了,所以最近一个月我都没有做业务测试,需求开发完后RD直接走免测就上线,…

利用Spring Boot实现信息化教学平台

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及,互联网成为人们查找信息的重要场所,二十一世纪是信息的时代,所以信息的管理显得特别重要。因此,使用计算机来管理信息化在线教学平台的相关信息成为必然。开…

Ansible自动化运维管理工具

一、Ansible 1.1、自动化运维管理工具有哪些? 工具架构语言使用情况Ansible无clientpython 协议用ssh95%puppetC/Sruby 协议用http基本不用chefC/Sruby 协议用http基本不用saltstackC/Spython 协议用ssh5% 1.2、Ansible简介 Ansible是一个基于Py…

深度学习 简易环境安装(不含Anaconda)

在Windows上安装深度学习环境而不使用Anaconda,下面是一个基于pip的安装指南: 1. 安装Python 确保你已经安装了Python。可以从Python官网下载Python,并在安装时勾选“Add Python to PATH”选项。 注意,Python 不要安装最新版的…

期权懂|期权止损策略如何平衡风险与收益?

本期让我懂 你就懂的期权懂带大家来了解,期权止损策略如何平衡风险与收益?有兴趣的朋友可以看一下。期权小懂每日分享期权知识,帮助期权新手及时有效地掌握即市趋势与新资讯! 期权止损策略如何平衡风险与收益? 期权止损…

如何写一个视频编码器演示篇

先前写过《视频编码原理简介》,有朋友问光代码和文字不太真切,能否补充几张图片,今天我们演示一下: 这是第一帧画面:P1(我们的参考帧) 这是第二帧画面:P2(需要编码的帧&…

计算机网络—静态路由

1.0 网络拓扑结构 星型拓扑结构是一个中心,多个分节点。它结构简单,连接方便,管理和维护都相对容易,而且扩展性强。网络延迟时间较小,传输误差低。中心无故障,一般网络没问题。中心故障,网络就出…

MIT-OC Electrochemical Energy Systems 1-2

一、等效电路模型 L2 电化学能量转换 1. 电化学能量转换与原电池 原电池可以将不同形式的能量(化学能、太阳能、机械压力等)转化为电能和热能。本文档讨论了一些原电池的示例及其等效电路模型。电压源:特性:电压源的特点是提供…

从网络请求到Excel:自动化数据抓取和保存的完整指南

背景介绍 在投资和财经领域,论坛一直是投资者们讨论和分享信息的重要平台,而东方财富股吧作为中国最大的财经论坛之一,聚集了大量投资者实时交流股票信息。对于投资者来说,自动化地采集这些发帖信息,并进行分析&#…

ionic Capacitor 生成 Android 应用

官方文档 https://ionic.nodejs.cn/developing/android/ https://capacitorjs.com/docs/getting-started 1、创建新的 Capacitor 应用程序 空目录下面 npm init capacitor/app2、install Capacitor npm install npm start在这里插入图片描述 3、生成dist目录 npm run buil…

ChatGPT 现已登陆 Windows 平台

今天,OpenAI 宣布其人工智能聊天机器人平台 ChatGPT 已开始预览专用 Windows 应用程序。OpenAI 表示,该应用目前仅适用于 ChatGPT Plus、Team、Enterprise 和 Edu 用户,是一个早期版本,将在今年晚些时候推出"完整体验"。…

二、PyCharm基本设置

PyCharm基本设置 前言一、设置中文汉化二、设置代码字体颜色三、设置鼠标滚轮调整字体大小四、修改 PyCharm 运行内存4.1 方式一4.1 方式二 五、显示 PyCharm 运行时内存六、设置代码模版配置的参数有: 七、PyCharm设置背景图总结 前言 为了让我们的 PyCharm 更好用…

Axure中继器实现时间读取和修改

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! 课程主题:中继器实现时间读取和修改 主要内容:中继器内不同时间格式的向外读取,和向内赋值,实现中继器时间的修改 应用场…

口电气设备:认证这道坎,如何跨越才能通全球?

今年国内各行各业都非常卷,出口成了一些公司的选择,但出口的电气设备往往不能跳过各种认证,这是市场准入的一部分,必须通过认证以满足当地的电气设备规范,比如出口欧盟需要CE认证 出口美国需要UL认证,加拿大…

ajax 读取文件

DOMException: Failed to read the responseXML property from XMLHttpRequest: The value is only accessible if the objects responseType is or document (was blob). at XMLHttpRequest.r ( $.ajax({ url: 未来之窗_服务, method: GET, …

展会亮点回顾|HMS汽车工业通信解决方案

2024 汽车测试及质量监控博览会(中国)(Testing Expo China – Automotive)于 8 月 28 日至 30 日在上海世博展览馆顺利举行。作为汽车测试技术领域的顶级盛会,来自全球的行业领袖和技术专家齐聚一堂,共同探…

基于Spring Boot、Vue和MyBatis的前后端分离座位管理系统:增删改查功能入门指南

在项目开发和工作实践中,创作灵感往往来自于对日常经验的总结与反思。通过记录技术难点和解决方案,不仅可以加深对问题的理解,还能为后续项目的优化提供参考。与此同时,撰写技术笔记、分享职场心得,不仅是对自己成长的…