网上找了一堆都没有什么头绪, 其中有在上传文件过程中修改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>