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

获得后缀名判断类型,如果是图片用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);
      },
    });
  }
};
相关推荐
换日线°1 天前
NFC标签打开微信小程序
前端·微信小程序
光影少年1 天前
AIGC + Taro / 小程序
小程序·aigc·taro
2501_915918411 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
2501_916007471 天前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview
天空属于哈夫克31 天前
Go 语言实战:构建一个企微外部群“技术贴收藏夹”小程序后端
小程序·golang·企业微信
菜鸟una1 天前
【微信小程序+Taro 3+NutUI 3】input (nut-input) 、 textarea (nut-texteare)类型使用避坑
前端·vue.js·微信小程序·小程序·taro
计算机毕设指导61 天前
基于微信小程序的校园二手交易系统【源码文末联系】
java·spring boot·spring·微信小程序·小程序·tomcat·maven
Jiaberrr1 天前
小程序setData性能优化指南:避开坑点,让页面丝滑如飞
前端·javascript·vue.js·性能优化·小程序
Code王1 天前
【课程设计/毕业设计】基于springboot +微信小程序的家政服务平台系统基于小程序的家政服务系统安全开发【附源码、数据库、万字文档】
spring boot·小程序·课程设计
CHU7290351 天前
旧物回收小程序前端功能版块解析:便捷赋能闲置循环
小程序