vue实现预览功能
Vue 实现文件预览功能
图片预览
使用 URL.createObjectURL 或 FileReader 实现本地图片预览：
<template>
<div>
<input type="file" @change="previewImage" accept="image/*">
<img :src="imageUrl" v-if="imageUrl" width="300">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
previewImage(e) {
const file = e.target.files[0]
this.imageUrl = URL.createObjectURL(file)
}
}
}
</script>PDF 预览
通过 pdf.js 库实现 PDF 预览：
npm install pdfjs-dist<template>
<div>
<input type="file" @change="previewPdf" accept=".pdf">
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
methods: {
async previewPdf(e) {
const file = e.target.files[0]
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
page.render({
canvasContext: context,
viewport: viewport
})
}
}
}
</script>Office 文档预览
使用微软 Office Online 预览服务：
<template>
<div>
<iframe
:src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`"
width="100%"
height="500px"
frameborder="0">
</iframe>
</div>
</template>
<script>
export default {
data() {
return {
fileUrl: 'https://example.com/document.docx'
}
}
}
</script>视频/音频预览
HTML5 原生媒体元素实现：
<template>
<div>
<input type="file" @change="previewMedia" accept="video/*,audio/*">
<video v-if="isVideo" :src="mediaUrl" controls width="400"></video>
<audio v-else :src="mediaUrl" controls></audio>
</div>
</template>
<script>
export default {
data() {
return {
mediaUrl: '',
isVideo: false
}
},
methods: {
previewMedia(e) {
const file = e.target.files[0]
this.isVideo = file.type.includes('video')
this.mediaUrl = URL.createObjectURL(file)
}
}
}
</script>通用文件预览方案
对于无法直接预览的文件类型，可提供下载按钮：
<template>
<div>
<input type="file" @change="handleFile">
<a v-if="fileUrl" :href="fileUrl" download>下载文件</a>
</div>
</template>
<script>
export default {
data() {
return {
fileUrl: ''
}
},
methods: {
handleFile(e) {
const file = e.target.files[0]
this.fileUrl = URL.createObjectURL(file)
}
}
}
</script>注意事项
-
使用
URL.createObjectURL后需要手动释放内存：// 组件销毁时 beforeDestroy() { if (this.imageUrl) { URL.revokeObjectURL(this.imageUrl) } } -
大文件处理应考虑使用分片读取或限制文件大小
-
跨域文件预览需要服务端支持 CORS
-
移动端可能需要额外处理文件选择和预览的兼容性问题
