前言:由于官网el-upload 图片列表缩略图模式没有查看大图的功能,所有自己自定义了一个,其中很多投机取巧的方式,写的不好,若有更好的方法,请留言哦(▽),不多说废话,直接贴
<template>
<el-upload
class="upload-el"
accept=".jpg,.png,.bmp" //限制上传的图片类型
:show-file-list="true" //是否显示已上传文件列表
multiple //设置多选
:limit="3" //最大允许上传个数
:on-exceed="handleExceed" //文件超出个数限制时的钩子
:file-list="fileArr" //上传的文件列表
:action="uploadConfig.uploadFileUrl" //必选参数,上传的地址
:headers="uploadConfig.headers" //设置上传的请求头部例如一些token信息
:on-error="uploadError" //文件上传失败时的钩子
:on-success="uploadSuccess" //文件上传成功时的钩子
list-type="picture">
<el-button size="small" class="uplaodBtn">上传</el-button>
<template #tip>
<div class="el-upload__tip">请上传格式为jpg、png、bmp的图片,且确保图片内容清晰可见</div>
<!-- 关键代码在这里,这段代码是我将list-type="picture"的时候显示出来的缩略图的代码复制出来修改的 这里无法覆盖原来的picture,所有我在ul里面加了一个show的类名,然后在样式里面将原来的隐藏了,机智吧 (*^▽^*) -->
<ul class="el-upload-list el-upload-list--picture show"