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

获得后缀名判断类型,如果是图片用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);
      },
    });
  }
};
相关推荐
说私域16 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源
!win !18 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
毕设源码-钟学长19 小时前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
毕设源码-赖学姐2 天前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
nodcloud2 天前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
老华带你飞2 天前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗2 天前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张3 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师3 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序