uniapp h5 实现预览图片和文件功能

要uniapp H5中实现预览图片和文件功能，可以使用uniapp提供的内置组件，如uni-image、uni-icon等。

对于图片预览，可以使用uni-image组件，它可以加载本地或远程图片，并支持缩放、旋转等操作。例如：

<template>
  <view>
    <uni-image :src="imageUrl" mode="aspectFit" @click="previewImage"></uni-image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  },
  methods: {
    previewImage() {
      uni.previewImage({
        urls: [this.imageUrl]
      })
    }
  }
}
</script>

对于文件预览，可以使用uni-icon组件，它可以显示不同类型的文件图标，并可以通过点击打开对应的文件。例如：

<template>
  <view>
    <uni-icon type="document" @click="previewFile"></uni-icon>
  </view>
</template>

<script>
export default {
  methods: {
    previewFile() {
      uni.previewFile({
        url: 'https://example.com/file.pdf'
      })
    }
  }
}
</script>

需要注意的是，在预览文件时，uni.previewFile方法需要传入文件的完整URL地址。