uniapp 文件预览代码

以下是一个基于uni-app的文件预览代码示例：

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="(item, index) in fileList" :key="index" :title="item.name" :extra="item.size + 'KB'" @click="previewFile(item)">
        <uni-icon :type="getFileIcon(item.type)"></uni-icon>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        fileList: [
          { name: 'test.pdf', size: 1024, type: 'pdf', url: 'http://example.com/test.pdf' },
          { name: 'test.doc', size: 2048, type: 'doc', url: 'http://example.com/test.doc' },
          { name: 'test.jpg', size: 3072, type: 'jpg', url: 'http://example.com/test.jpg' }
        ]
      }
    },
    methods: {
      previewFile(file) {
        uni.showLoading({
          title: '加载中...'
        })
        uni.downloadFile({
          url: file.url,
          success: function (res) {
            uni.hideLoading()
            if (res.statusCode === 200) {
              uni.openDocument({
                filePath: res.tempFilePath
              })
            }
          },
          fail: function () {
            uni.hideLoading()
            uni.showToast({
              title: '预览失败',
              icon: 'none'
            })
          }
        })
      },
      getFileIcon(fileType) {
        switch (fileType) {
          case 'pdf':
            return 'pdf'
          case 'doc':
            return 'doc'
          case 'jpg':
            return 'camera'
          default:
            return 'file'
        }
      }
    }
  }
</script>

该示例中，使用uni-list和uni-list-item组件展示文件列表，并通过@click事件监听文件项的点击，调用previewFile方法进行文件预览。

在previewFile方法中，使用uni.downloadFile下载文件，并在下载成功后通过uni.openDocument打开文件。在下载过程中，通过uni.showLoading展示加载中提示，下载完成后通过uni.hideLoading隐藏提示。若下载失败，则通过uni.showToast展示预览失败提示。

getFileIcon方法用于根据文件类型返回对应的图标类型，以便在文件列表中展示文件图标。