<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);
}
成品: