Bootstrap

el-upload自定义文件列表

<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);
}

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

;