当前位置：首页 > VUE

vue实现文件预览功能

2026-02-21 02:43:11VUE

使用 Vue 实现文件预览功能

图片预览

通过 URL.createObjectURL 将文件转换为临时 URL，结合 <img> 标签实现预览。

<template>
  <div>
    <input type="file" @change="handleImagePreview" accept="image/*" />
    <img v-if="previewUrl" :src="previewUrl" alt="Preview" style="max-width: 300px;" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: ''
    }
  },
  methods: {
    handleImagePreview(event) {
      const file = event.target.files[0]
      if (file) {
        this.previewUrl = URL.createObjectURL(file)
      }
    }
  },
  beforeUnmount() {
    if (this.previewUrl) {
      URL.revokeObjectURL(this.previewUrl)
    }
  }
}
</script>

PDF 预览

使用 pdf.js 库实现 PDF 文件预览。

<template>
  <div>
    <input type="file" @change="handlePdfPreview" accept=".pdf" />
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'

export default {
  methods: {
    async handlePdfPreview(event) {
      const file = event.target.files[0]
      if (!file) return

      const arrayBuffer = await file.arrayBuffer()
      const pdf = await pdfjsLib.getDocument(arrayBuffer).promise
      const page = await pdf.getPage(1)

      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise
    }
  }
}
</script>

视频/音频预览

使用 <video> 或 <audio> 标签实现媒体文件预览。

<template>
  <div>
    <input type="file" @change="handleMediaPreview" accept="video/*,audio/*" />
    <video v-if="isVideo" :src="previewUrl" controls style="max-width: 500px;"></video>
    <audio v-else-if="isAudio" :src="previewUrl" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: '',
      isVideo: false,
      isAudio: false
    }
  },
  methods: {
    handleMediaPreview(event) {
      const file = event.target.files[0]
      if (!file) return

      this.previewUrl = URL.createObjectURL(file)
      this.isVideo = file.type.startsWith('video/')
      this.isAudio = file.type.startsWith('audio/')
    }
  },
  beforeUnmount() {
    if (this.previewUrl) {
      URL.revokeObjectURL(this.previewUrl)
    }
  }
}
</script>

文本文件预览

使用 FileReader API 读取文本文件内容。

<template>
  <div>
    <input type="file" @change="handleTextPreview" accept=".txt,.json,.xml,.csv" />
    <pre v-if="textContent">{{ textContent }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textContent: ''
    }
  },
  methods: {
    handleTextPreview(event) {
      const file = event.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (e) => {
        this.textContent = e.target.result
      }
      reader.readAsText(file)
    }
  }
}
</script>

使用第三方库实现多格式预览

对于更复杂的预览需求，可以使用 vue-file-preview 或 vue-media-preview 等第三方组件。

安装示例：

npm install vue-file-preview

使用示例：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <vue-file-preview :file="selectedFile" v-if="selectedFile" />
  </div>
</template>

<script>
import VueFilePreview from 'vue-file-preview'

export default {
  components: {
    VueFilePreview
  },
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0]
    }
  }
}
</script>