当前位置：首页 > VUE

vue前端实现文件预览

2026-02-20 23:14:41VUE

vue前端实现文件预览的方法

使用原生HTML5 FileReader API

通过HTML5的FileReader对象可以读取用户本地文件内容，适用于图片、文本等格式预览。

<template>
  <input type="file" @change="previewFile" />
  <img v-if="imageUrl" :src="imageUrl" />
</template>

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

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

使用第三方预览库

对于复杂文件类型（如PDF、Office文档），可使用专业预览库：

PDF预览：使用pdf.js
```
npm install pdfjs-dist
```

<template>
  <div ref="pdfViewer"></div>
</template>

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

export default {
  methods: {
    async renderPDF(file) {
      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 = document.createElement('canvas')
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width

      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise

      this.$refs.pdfViewer.appendChild(canvas)
    }
  }
}
</script>

Office文档预览：使用mammoth.js/docx.js等库
```
npm install mammoth
```

使用在线预览服务

对于无法直接处理的文件类型，可调用第三方API转换：

methods: {
  async previewWithAPI(file) {
    const formData = new FormData()
    formData.append('file', file)

    const response = await axios.post('https://api.example.com/convert', formData)
    this.previewUrl = response.data.url
  }
}

多文件类型处理策略

通过文件扩展名判断处理方式：

vue前端实现文件预览

methods: {
  handleFile(file) {
    const ext = file.name.split('.').pop().toLowerCase()
    switch(ext) {
      case 'jpg':
      case 'png':
        this.previewImage(file)
        break
      case 'pdf':
        this.renderPDF(file)
        break
      case 'docx':
        this.previewDocx(file)
        break
      default:
        this.downloadFile(file)
    }
  }
}