vue 实现图片预览
实现图片预览的基本思路
在Vue中实现图片预览功能，通常需要结合HTML5的File API和URL.createObjectURL方法。用户选择图片文件后，通过JavaScript读取文件内容并生成预览URL，最后绑定到img标签的src属性上。
使用input元素选择文件
创建一个file类型的input元素，并添加change事件监听：
<input type="file" @change="previewImage" accept="image/*">预览方法实现
在Vue组件中实现预览逻辑：
methods: {
previewImage(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
this.previewUrl = e.target.result;
};
reader.readAsDataURL(file);
}
}显示预览图片
在模板中添加img元素显示预览：
<img v-if="previewUrl" :src="previewUrl" style="max-width: 300px; max-height: 300px;">使用第三方库实现高级功能
对于更复杂的预览需求（如缩放、旋转等），可以使用第三方库：
npm install vue-image-lightbox使用示例：
import Lightbox from 'vue-image-lightbox'
export default {
components: {
Lightbox
},
data() {
return {
showLightbox: false,
images: [
'path/to/image1.jpg',
'path/to/image2.jpg'
]
}
}
}多图片预览实现
对于多图片预览，可以使用数组存储多个预览URL：
previewImages(event) {
this.previewUrls = [];
Array.from(event.target.files).forEach(file => {
const reader = new FileReader();
reader.onload = (e) => {
this.previewUrls.push(e.target.result);
};
reader.readAsDataURL(file);
});
}移动端适配注意事项
在移动端实现时，需要注意：
- 添加capture属性可以直接调用相机：
<input type="file" accept="image/*" capture="camera"> - 考虑使用响应式布局适应不同屏幕尺寸
- 对上传的图片进行压缩处理，减少内存占用
清除预览的实现
添加清除预览的功能：
clearPreview() {
this.previewUrl = null;
this.$refs.fileInput.value = '';
}性能优化建议
对于大量图片预览：
- 使用虚拟滚动技术只渲染可见区域的图片
- 对预览图片进行适当压缩
- 实现懒加载功能
- 及时释放不再使用的ObjectURL，避免内存泄漏
