el-upload自定义filelist列表，配合el-image-viewer显示图片

先上效果图

 

 

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具体就不写了，有问题可以私信，欢迎一起交流学习 。