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

成品：

el-upload自定义文件列表相关推荐

ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
upload组件多个文件上传、自定义文件列表显示及手动上传
1.多个上传和上传单个 1)由 multiple属性来控制 2)保存state时,注意存的List内容即可 //参数 uploadProps={name:'file', //接口入参名accept: ...
html列表按时间排序代码_把 Linux 上的文件列表和排序玩出花来 | Linux 中国
导读:Linux 命令可以提供文件的详细信息,也可以自定义显示的文件列表,甚至可以深入到文件系统的目录中,只要你愿意看.本文字数:5090,阅读时长大约:6分钟https://linux.cn/art ...
find linux 目录深度_把 Linux 上的文件列表和排序玩出花来
Linux 命令可以提供文件的详细信息,也可以自定义显示的文件列表,甚至可以深入到文件系统的目录中,只要你愿意看. • 来源:linux.cn • 作者:Sandra Henry-stocker • ...
SSM框架使用Layui文件上传插件实现多文件上传（多文件列表）
SSM框架使用Layui文件上传插件实现多文件上传(多文件列表) pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <!--co ...
linux下文件排序,把 Linux 上的文件列表和排序玩出花来
在 Linux 系统上,有许多方法可以列出文件并显示它们的信息.这篇文章回顾了一些提供文件细节的命令,并提供了自定义文件列表的选项,以满足你的需求. 大多数命令都会列出单个目录中的文件,而其他命令则可 ...
linux文件列表的理解,如何深刻理解 Linux 上的文件列表和排序？
在 Linux 系统上,有许多方法可以列出文件并显示它们的信息.这篇文章回顾了一些提供文件细节的命令,并提供了自定义文件列表的选项,以满足你的需求. 大多数命令都会列出单个目录中的文件,而其他命令则可 ...
使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法
使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法使用angular框架写前端的用户一般都比较喜欢用ngZorro,本人最近在使用ngZorro中的Upload自定 ...
使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...

el-upload自定义文件列表

el-upload自定义文件列表相关推荐

最新文章

热门文章