示例讲解UniApp怎么实现本地文件预览功能

{
  "name": "myApp",
  "version": "1.0.0",
  // 添加uni-app-plus插件
  "plus": {
    "plugins": {
      "io": {
        "version": "1.4.4",
        "provider": "uni.plus.io"
      }
    }
  }
}

<template>
  <view>
    <button @click="previewFile">预览文件</button>
  </view>
</template>

<script>
import io from '@/js_sdk/uni-app-plus/io/io.js'

export default {
  methods: {
    previewFile() {
      // 获取本地文件路径
      const filePath = 'file:///absolute/path/to/file'
      // 获取文件扩展名
      const fileExt = filePath.substring(filePath.lastIndexOf('.') + 1)
      // 定义支持预览的文件类型数组
      const previewableFileTypes = ['pdf', 'doc', 'docx', 'ppt', 'pptx', 'txt', 'jpg', 'jpeg', 'png', 'gif', 'bmp']
      // 判断文件是否支持预览
      if (previewableFileTypes.indexOf(fileExt.toLowerCase()) === -1) {
        uni.showToast({
          title: '该文件类型不支持预览',
          icon: 'none'
        })
        return
      }
      // 调用插件预览文件
      io.previewFile({
        url: filePath,
        fail: (res) => {
          uni.showToast({
            title: '预览文件失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>