先上效果图
template:
<el-upload class="elupload"
action="****"
:disabled=" false"
:on-preview="handlePreview"
:before-upload="beforeUpload"
:on-success="handleAvatarSuccess"
:show-file-list="false"
list-type="picture"
:auto-upload="true">
<el-input disabled placeholder="点击添加图片">
<i slot="suffix" style="display: flex;align-items: center;">
<img class="header-icon" src="@/assets/icons/tupianshangchuanclose.png" alt="" />
</i>
</el-input>
</el-upload>
<template v-if="fileList.length !==0">
<div class="uploadPreview" style="margin-top: 10px;border: 1px solid #ECECEC;width: 280px;box-shadow: 0px 0px 5px 6px rgba(208,208,208,0.13);
border-radius: 6px;">
<div style="left: 20px;" class="popper__arrow"></div>
<el-table :data="fileList" :highlight-current-row="true" stripe :row-style="rowStyle"
:show-header="false" style="width:280px;margin-top: 5px;max-height: 280px;overflow: auto;">
<el-table-column width="50px" prop="url" label="url">
<template slot-scope="scope">
<el-image :src="scope.row.url">
</el-image>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="name" label="name" width="150">
</el-table-column>
<el-table-column class-name="right">
<template slot-scope="scope">
<div class="preview" @click="handlePreview( scope.row)"><i class="el-icon-view"></i></div>
<div class="download" @click="handleDownload(scope.row)"><i class="el-icon-download"></i>
</div>
<div class="del" @click="handleDelete( scope.row)"><i class="el-icon-delete"></i></div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<el-image-viewer v-if="showImgViewer" :on-close="closeImgViewer" :url-list="imagePreviewUrls" :z-index="3000"
:initial-index="initialImgPreviewIndex" />
上述一共有三段代码,分别是上传控件,列表控件,图片预览控件,图片预览控件在script中引入
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
只要是实现思路,核心就是关闭upload自带的filelist显示框,然后图片上传成功后把返回的图片地址push到table的fileList中,script具体就不写了,有问题可以私信,欢迎一起交流学习 。