网上找了一堆都没有什么头绪, 其中有在上传文件过程中修改class达到突变更换的目的,但是引入了多文件和多组件的复杂场景后效果不尽人意, 比如删除文件或者回显没有办法正常显示图标了.

在研究了下, 因为elementui的文件图标是写死的, 我找到了一种效果几乎打到了我的期望, 基于修改class的想法我找到了思路
每次文件列表发生改变时, 就把整个页面的文件列表重新渲染一下图标, 显示肯定不会出错了

效果图

上传组件

<!-- 这里只需要加个class, 用作定义图标样式 -->
<el-upload
   class="myupload"
   ...
 >
   ...
 </el-upload>

定义方法, 只需要每次要重新渲染的时候就调用一下renderFileIcon()即可

methods: {
	renderFileIcon() {
	  //找出所有文件图标的class
	  this.$nextTick(() => {
	    let fileElementList = document.getElementsByClassName('el-upload-list__item-name');
	    if (fileElementList && fileElementList.length > 0) {
	      for (let ele of fileElementList) {
	        let fileName = ele.innerText;
	        //获取文件名后缀
	        let fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
	        let iconElement = ele.getElementsByTagName('i')[0];
	        if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fileType) != -1) {
              iconElement.className = "imgicon-img" // 图⽚，动图
            } else if (['mp4','3gp','avi',"flv",'MP4','3GP','AVI',"FLV"].indexOf(fileType) != -1) {
              iconElement.className = 'imgicon-video' // 视频
            } else if (['doc','docx','DOC','DOCX'].indexOf(fileType) != -1) {
              iconElement.className = 'imgicon-docx' // 文档
            } else if (['xls','xlsx','XLS','XLSX'].indexOf(fileType) != -1) {
              iconElement.className = 'imgicon-xlsx' // 表格
            } else if (['ppt','pptx','PPT','PPTX'].indexOf(fileType) != -1) {
              iconElement.className = 'imgicon-pptx' // PPT
            } else if (['zip','ZIP'].indexOf(fileType) != -1) {
              iconElement.className = 'imgicon-zip' // 压缩包
            } else if (['pdf','PDF'].indexOf(fileType) != -1) {
              iconElement.className = 'imgicon-pdf' // PDF
            } else {
              iconElement.className = 'imgicon-default' //默认图标
            }
	      }
	    }
	  })
	},
}

样式定义

主要定义class的自定义文件图标路径

<style scoped>
	.myupload >>> .imgicon-video {
	  display: inline-block;
	  width: 20px;
	  margin-bottom: -3px;
	  height: 20px;
	  background-size: 100% 100%;
	  margin-right: 10px;
	  background-image: url("../../../assets/images/fileicon/mp4.png");
	}
	.myupload >>> .imgicon-img {
	  display: inline-block;
	  width: 20px;
	  margin-bottom: -3px;
	  height: 20px;
	  background-size: 100% 100%;
	  margin-right: 10px;
	  background-image: url("../../../assets/images/fileicon/jpeg.png");
	}
	.myupload >>> .imgicon-pdf {
	  display: inline-block;
	  width: 20px;
	  margin-bottom: -3px;
	  height: 20px;
	  background-size: 100% 100%;
	  margin-right: 10px;
	  background-image: url("../../../assets/images/fileicon/pdf.png") !important;
	}
	.myupload >>> .imgicon-docx {
	  display: inline-block;
	  width: 20px;
	  margin-bottom: -3px;
	  height: 20px;
	  background-size: 100% 100%;
	  margin-right: 10px;
	  background-image: url("../../../assets/images/fileicon/docx.png") !important;
	}
	.myupload >>> .imgicon-zip {
	  display: inline-block;
	  width: 20px;
	  margin-bottom: -3px;
	  height: 20px;
	  background-size: 100% 100%;
	  margin-right: 10px;
	  background-image: url("../../../assets/images/fileicon/zip.png") !important;
	}
	.myupload >>> .imgicon-pptx {
	  display: inline-block;
	  width: 20px;
	  margin-bottom: -3px;
	  height: 20px;
	  background-size: 100% 100%;
	  margin-right: 10px;
	  background-image: url("../../../assets/images/fileicon/pptx.png") !important;
	}
	.myupload >>> .imgicon-xlsx {
	  display: inline-block;
	  width: 20px;
	  margin-bottom: -3px;
	  height: 20px;
	  background-size: 100% 100%;
	  margin-right: 10px;
	  background-image: url("../../../assets/images/fileicon/xlsx.png") !important;
	}
	.myupload >>> .imgicon-default {
	  display: inline-block;
	  width: 20px;
	  margin-bottom: -3px;
	  height: 20px;
	  background-size: 100% 100%;
	  margin-right: 10px;
	  background-image: url("../../../assets/images/fileicon/rar.png") !important;
	}
</style>