vue实现文件预览功能

实现文件预览功能可以使用html5的FileReader API，这是一个用于读取文件的JavaScript API。具体步骤如下：

1. 在Vue组件中添加一个文件选择器

<template>
  <div>
    <input type="file" @change="handleFileSelect">
    <div v-if="previewUrl">
      <img :src="previewUrl" v-if="isImage">
      <video :src="previewUrl" v-if="isVideo"></video>
      <audio :src="previewUrl" v-if="isAudio"></audio>
      <p v-if="isText">{{fileContent}}</p>
    </div>
  </div>
</template>

2. 在Vue组件中添加一个方法来处理文件选择器的change事件

<script>
export default {
  data() {
    return {
      previewUrl: '',
      fileContent: '',
      isImage: false,
      isVideo: false,
      isAudio: false,
      isText: false,
    }
  },
  methods: {
    handleFileSelect(event) {
      const file = event.target.files[0]
      const reader = new FileReader()

      reader.onload = (e) => {
        this.previewUrl = e.target.result
        this.isImage = file.type.startsWith('image/')
        this.isVideo = file.type.startsWith('video/')
        this.isAudio = file.type.startsWith('audio/')
        this.isText = file.type.startsWith('text/')

        if (this.isText) {
          this.fileContent = e.target.result
        }
      }

      reader.readAsDataURL(file)
    }
  }
}
</script>

3. 根据文件类型显示预览内容。如果是图片类型，将文件路径设置为图片的src属性值；如果是视频或音频类型，将文件路径设置为视频或音频的src属性值；如果是文本类型，将文件内容显示在页面上。

这样就可以实现文件预览功能了。需要注意的是，FileReader API支持的文件类型有限，不适用于所有类型的文件。