实现功能:上传图标显示图片图标,上传文件显示文档图标,上传视频显示视频图标
首先想到的是去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') // 其他默认文档
      }
		...................//此处正常的写文件处理流程就行了
		},

在这里插入代码片


GitHub 加速计划 / eleme / element
14
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐