vue预览功能怎么实现
Vue 预览功能实现方法
基于文件上传的图片预览
使用 <input type="file"> 结合 FileReader API 实现本地图片预览：
<template>
<div>
<input type="file" @change="previewImage" accept="image/*">
<img v-if="imageUrl" :src="imageUrl" width="200">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
previewImage(event) {
const file = event.target.files[0]
if (file && file.type.match('image.*')) {
const reader = new FileReader()
reader.onload = (e) => {
this.imageUrl = e.target.result
}
reader.readAsDataURL(file)
}
}
}
}
</script>PDF 文档预览
使用第三方库如 pdf.js 实现 PDF 预览：
npm install pdfjs-dist组件实现：
<template>
<div>
<input type="file" @change="previewPdf" accept="application/pdf">
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
methods: {
async previewPdf(event) {
const file = event.target.files[0]
if (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 = 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>视频预览功能
使用 URL.createObjectURL() 实现视频文件预览：
<template>
<div>
<input type="file" @change="previewVideo" accept="video/*">
<video v-if="videoUrl" :src="videoUrl" controls width="400"></video>
</div>
</template>
<script>
export default {
data() {
return {
videoUrl: ''
}
},
methods: {
previewVideo(event) {
const file = event.target.files[0]
if (file && file.type.match('video.*')) {
this.videoUrl = URL.createObjectURL(file)
}
}
}
}
</script>富文本内容预览
结合 v-html 指令实现富文本预览：
<template>
<div>
<textarea v-model="content" placeholder="输入富文本内容"></textarea>
<div class="preview" v-html="content"></div>
</div>
</template>
<script>
export default {
data() {
return {
content: ''
}
}
}
</script>
<style>
.preview {
border: 1px solid #eee;
padding: 10px;
margin-top: 10px;
min-height: 100px;
}
</style>第三方组件库实现
使用 element-ui 的 el-upload 组件快速实现预览功能：
npm install element-ui组件示例：
<template>
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:on-change="handlePreview">
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
export default {
methods: {
handlePreview(file) {
console.log('预览文件:', file)
}
}
}
</script>以上方法可根据实际需求选择或组合使用，实现不同类型的预览功能。
