在element-ui 使用 upload 预览图片

在element-UI中直接拿到的el-upload组件是是有删除功能的,没有预览的功能,现在我们需要为组件添加一个上存之前可以放大预览的功能,同时又保留删除图片的功能。

如图:

《在element-ui 使用 upload 预览图片》

首先介绍的是 list-type:文件列表的类型,可选值:text | picture | picture-card ,默认值为 text.

file-list:上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]

on-preview:点击文件列表中已上传的文件时的钩子,可以点击文件信息。

html部分

例如:



<el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :file-list="imgs" :on-remove="handleRemove" :before-remove="beforeRemove"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible" append-to-body> <img width="100%" fit="contain" :src="dialogImageUrl" alt=""> </el-dialog>

点击图片是上搜索的图标,调用on-preview 方法,获取到图片信息,将图片的URL 赋值到el-dialog 弹框中。

js部分

handlePictureCardPreview(file) {
  this.dialogImageUrl = file.url;
  this.dialogVisible = true;
},

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注