实现功能：上传图标显示图片图标，上传文件显示文档图标，上传视频显示视频图标
首先想到的是去Element UI 查看有没有自定义的功能，后面发现底层源码写死的，那就不能自定义，就只能通过js操作了，我就在上传成功的钩子函数处理了
el-upload组件
<el-uploadstyle="display: flex; align-items: center"ref="upload"accept="image/png, image/gif, application/msword, text/plain, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.wordprocessingml.document, aplication/zip, aplication/rar, audio/mp4, video/mp4"multiple:limit="5":action="loadhttp":on-change="handleChange":on-exceed="handleExceed":file-list="fileList":auto-upload="true":before-upload="beforeUpload":on-success="loadsuccess":before-remove="loadremove":headers="getheaders"><i class="el-icon-upload"></i><span>点击上传</span></el-upload>
loadSucess方法
loadsuccess (response, file, fileList) {var houzhui = file.name.split('.') // 获取上传文件的后缀var title = document.getElementsByClassName('el-icon-document')[fileList.length-1] // [fileList.length-1] 这个需要特别注意，需要查看当前页面不上传之前有多少个后才能根据具体情况具体分析if (houzhui[1]=='png'||houzhui[1]=='jpg'||houzhui[1]=='jpeg'||houzhui[1]=='gif') { title.classList.add('el-icon-picture-outline') // 图片，动图} else if (houzhui[1]=='MP4'||houzhui[1]=='mp4'||houzhui[1]=='avi') {title.classList.add('el-icon-video-camera') // 视频} else {title.classList.add('el-icon-document') // 其他默认文档}...................//此处正常的写文件处理流程就行了},
在这里插入代码片
