vue element upload实现图片本地预览
时间: 2023-09-08 16:00:56 浏览: 77
使用vue element upload组件实现图片本地预览,首先需要使用el-upload组件来实现文件上传功能。在el-upload标签中,需要定义以下属性:
- action:上传文件的地址;
- list-type:设置为"picture-card",以卡片形式展示上传的图片;
- on-preview:设置一个方法,用于点击预览图片。
然后,在methods中定义onPreview方法:
```
onPreview(file) {
const reader = new FileReader();
reader.onload = (e) => {
this.previewImage = e.target.result;
this.previewVisible = true;
};
reader.readAsDataURL(file.raw);
},
```
在data中定义预览图片的相关数据:
```
data() {
return {
previewVisible: false, // 控制预览对话框显示或隐藏
previewImage: '' // 预览图片的地址
}
},
```
在template中,使用el-dialog组件来实现图片预览的对话框:
```
<el-dialog
:visible="previewVisible"
:close-on-click-modal="true"
@close="previewVisible = false"
>
<img :src="previewImage" style="width: 100%" alt="图片预览">
</el-dialog>
```
最后,在el-upload中绑定on-preview方法:
```
<el-upload
:action="uploadUrl"
list-type="picture-card"
@on-preview="onPreview"
>
<i class="el-icon-plus"></i>
</el-upload>
```
以上就是使用vue element upload实现图片本地预览的代码。当用户选择一张图片后,点击图片会弹出预览对话框,显示选中的图片。