在element-UI中直接拿到的el-upload组件是是有删除功能的,没有预览的功能,现在我们需要为组件添加一个上存之前可以放大预览的功能,同时又保留删除图片的功能。
如图:
首先介绍的是 list-type:文件列表的类型,可选值:text | picture | picture-card ,默认值为 text.
file-list:上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]
on-preview:点击文件列表中已上传的文件时的钩子,可以点击文件信息。
html部分
例如:
action="#"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:file-list="imgs"
:on-remove="handleRemove"
:before-remove="beforeRemove">
点击图片是上搜索的图标,调用on-preview 方法,获取到图片信息,将图片的URL 赋值到el-dialog 弹框中。
js部分
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},