el-upload自定义文件列表

原创已于 2022-10-20 11:32:59 修改 · 7.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui #vue.js

于 2022-10-08 17:09:37 首次发布

本文介绍如何使用Element UI的上传组件实现文件上传功能，并自定义文件列表展示方式。通过设置属性，可以隐藏默认的文件列表并实现文件上传后的回调处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-upload
  :action="uploadUrl"
  ref="importUpload"
  :auto-upload="false"
  :show-file-list="false" // 不显示element自带回显列表
  :on-success="uploadSuccess"
  :on-change="handleChange"
  :on-error="uploadError"
  :headers="{
    xxx
  }"
  accept=".xls,.xlsx"
>
  <el-button size="small" type="primary" icon="el-icon-folder-add"
    >选择文件</el-button
  >
</el-upload>

通过设置:show-file-list="false"不使用element自带的文件列表，然后调用:on-change方法获取文件列表数据

data(){
	return{
		fileList:[] // 存放文件列表
	}
}    
uploadSuccess(file,fileList){
	// file:当前上传的文件  fileList:文件列表
	this.fileList=[]
	this.fileList=fileList
}

自定义文件列表组件：

<!-- 文件列表容器 -->
<el-row type="flex" justify="center">
  <div style="width:80%">
    <div class="fileTemp" v-for="file in fileList" :key="file.uid">
      <i class="el-icon-receiving" style="margin-right: 5px"></i>
      {{ file.name }}</div
    >
  </div>
</el-row>

style：

// 文件列表容器
.fileTemp {
  margin-bottom: 5px;
  background-color: rgb(236, 234, 234);
}

成品：
在这里插入图片描述