uniapp微信小程序预览图片、文档、视频等格式文件

最新推荐文章于 2025-07-31 10:35:49 发布

原创最新推荐文章于 2025-07-31 10:35:49 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

uniapp微信小程序预览图片、文档、视频等格式文在这里插入代码片

//点击文件
      onPreview(item) {
        const url = item.link
        const imageRegex = /(\.jpg|\.jpeg|\.png)$/i
        const docRegex = /(\.doc|\.docx|\.pdf|\.ppt|\.xlsx|\.xls|\.pptx)$/i
        const videoRegex = /(\.mp4|\.avi|\.mov|\.mkv|\.rmvb)$/i
        const othersRegex = /(\.txt|\.csv)$/i
        if (imageRegex.test(url)) {
          // 预览照片
          uni.previewImage({
            current: 0,
            urls: [url]
          })
        } else if (docRegex.test(url)) {
          // 预览文档
          this.lookFile(url)
        } else if (videoRegex.test(url)) {
          uni.navigateTo({
            url: '/pages/webpageView/webpageView?src=' + encodeURIComponent(url)
          })
        } else if (othersRegex.test(url)) {
          // 预览其他文件
        } else {
          uni.$u.toast('该文件类型不支持预览！')
        }
      },
      // 预览文件
      lookFile(url) {
        uni.downloadFile({
          url: url,
          success: function(res) {
            var filePath = res.tempFilePath
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              fileType: '',
              success: function() {
                console.log('打开文档成功')
              },
              fail: function() {
                uni.showToast({
                  title: '打开失败',
                  icon: 'none'
                })
              }
            })
          }
        })
      },