自定义Element ui中el-upload上传后的文件图标

最新推荐文章于 2025-10-11 15:48:49 发布

原创最新推荐文章于 2025-10-11 15:48:49 发布 · 7.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #vue.js #html5

本文介绍如何使用ElementUI的el-upload组件实现根据不同类型的文件上传显示不同的图标，包括图片、文档和视频等，并提供了具体的实现代码。

实现功能：上传图标显示图片图标，上传文件显示文档图标，上传视频显示视频图标
首先想到的是去Element UI 查看有没有自定义的功能，后面发现底层源码写死的，那就不能自定义，就只能通过js操作了，我就在上传成功的钩子函数处理了
el-upload组件

<el-upload
        style="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') // 其他默认文档
      }
		...................//此处正常的写文件处理流程就行了
		},

在这里插入代码片