1.首先说明开发环境，vue2项目，采用列表模式的el-upload组件时，加入附件预览功能

element官网给出的示范代码是以下写法

javascript"><el-uploadclass="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList"list-type="picture"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>export default {data() {return {fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]};},methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);}}}
</script>

此时遇到的问题是，点击名字可以触发预览函数，点击缩略图没效果

我们需要改变一下写法，这些在官网里边都有

javascript"><el-upload><el-button size="small" type="primary">点击上传附件</el-button><div class="el-upload__tip" slot="tip">提示信息</div><template slot="file" slot-scope="{file}"><img @click="handlePreview" :src="file.url" class="el-upload-list__item-thumbnail"><p @click="handlePreview" class="el-upload-list__item-name">{{ file.name }}</p><i @click="handleRemove" class="el-icon-close"></i></template></el-upload>

这样就可以把预览事件同时加在名字和缩略图上，进而配合预览组件使用即可