element upload预览_在element-ui 使用 upload 预览图片

在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;

},