遇到的需求：原本点击名称的放大图片的，又想上传图片后修改图片名称。
想到的解决的方案是点击左侧的缩略图放大图片，点击名称弹出修改名称。
el-upload组件给出的钩子on-preview（点击文件列表中已上传的文件时的钩子），只能点击名称，这样就需要去自定义文件显示列表，插槽slot="file"
我这里是图片列表的模式，目的是给缩略图加上点击事件，改动较小，通过F12找到对应的代码copy下来（其他展示模式也可这样操作），这样列表的显示样式是不变的，但是对应的事件就需要手动加上了；也可以自行写入想要的样式；
主要是原来的删除事件,通过调用组件的rmove事件：this.$refs.upload.handleRemove(file)，就可以触发on-remove（文件列表移除文件时的钩子）；其余在其他元素上添加事件就很方便了；
涉及模块的代码如下：
<el-upload
ref="upload"
:disabled="isonlyShow"
action="#"
:http-request="handleUpload"
:file-list="itemFileList"
:accept="imgTypeAccept"
:limit="limitNum"
:on-exceed="handleExceed"
:before-upload="beforeUploadHandle"
:on-success="successHandle"
:on-error="ErrorHandle"
:on-preview="previewHandle"
:on-remove="removeHandle"
class="upload-demo"
list-type="picture"
drag
>
<!-- 上传按钮 -->
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传图片文件，
<template v-if="fileSize">
大小不超过<b style="color: #f56c6c">{{ fileSize }}MB,</b>
</template>
</div>
<template slot="file" slot-scope="{ file }">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
@click="previewHandle(file)"
/>
<a class="el-upload-list__item-name" @click="changeNameHandle(file)">
<i class="el-icon-document"></i>{{ file.name ? file.name : "/" }}
</a>
<label class="el-upload-list__item-status-label">
<i class="el-icon-check el-icon-upload-success"> </i>
</label>
<i class="el-icon-close" @click="triggerRemoveHandle(file)"></i>
<i class="el-icon-close-tip">按 delete 键可删除</i>
</template>
</el-upload>
// 手动触发
triggerRemoveHandle(file) {
this.$refs.upload.handleRemove(file);
},
// 删除文件-钩子
removeHandle(file, fileList) {
// this.notifySuccess("删除成功");
this.formatlistEmit(fileList);
},
在编辑名称后对应显示的名称是改变了，但本质的file-list是还没更新，我需要再手动更新，通过this.$refs.upload.uploadFiles可以获得最新的文件列表；
记录一下，有些说的不准确，慢慢完善哈~
