当前位置：首页 > VUE

vue如何实现预览

2026-03-08 10:25:52VUE

Vue 实现文件预览的方法

图片预览

使用 URL.createObjectURL 或 FileReader 将文件转换为可预览的 URL。适用于常见的图片格式（jpg、png、gif 等）。

vue如何实现预览

<template>
  <input type="file" @change="previewImage" accept="image/*">
  <img v-if="previewUrl" :src="previewUrl" alt="Preview">
</template>

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

PDF 预览

使用第三方库如 pdf.js 或 vue-pdf 实现 PDF 文件预览。

vue如何实现预览

<template>
  <input type="file" @change="previewPdf" accept="application/pdf">
  <pdf v-if="pdfUrl" :src="pdfUrl"></pdf>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: ''
    }
  },
  methods: {
    previewPdf(e) {
      const file = e.target.files[0]
      this.pdfUrl = URL.createObjectURL(file)
    }
  }
}
</script>

视频/音频预览

使用 HTML5 的 <video> 和 <audio> 标签实现多媒体文件预览。

<template>
  <input type="file" @change="previewVideo" accept="video/*">
  <video v-if="videoUrl" :src="videoUrl" controls></video>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: ''
    }
  },
  methods: {
    previewVideo(e) {
      const file = e.target.files[0]
      this.videoUrl = URL.createObjectURL(file)
    }
  }
}
</script>

Office 文档预览

使用微软的 Office Online 服务或 Google Docs Viewer 实现 Word、Excel 等文档的在线预览。

<template>
  <input type="file" @change="previewOffice" accept=".doc,.docx,.xls,.xlsx">
  <iframe 
    v-if="officeUrl" 
    :src="`https://view.officeapps.live.com/op/embed.aspx?src=${officeUrl}`"
    width="100%" 
    height="500px"
  ></iframe>
</template>

<script>
export default {
  data() {
    return {
      officeUrl: ''
    }
  },
  methods: {
    previewOffice(e) {
      const file = e.target.files[0]
      this.officeUrl = URL.createObjectURL(file)
    }
  }
}
</script>