当前位置: 首页 > news >正文

【vue2+elementui】记录el-upload导入文件:只上传一个文件,且再次上传会覆盖上一个文件

使用on-change实现,因为:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用

<div class="batch-import-contain"><el-button type="primary" size="mini">下载模板</el-button><el-uploadclass="upload-demo"dragaction="https://jsonplaceholder.typicode.com/posts/"accept=".xls,.xlsx,.csv,.et,.ett,.xlt":multiple="false":file-list="fileList":on-change="onchange"><i class="el-icon-upload"></i><div class="el-upload__text"><p>点击或将文件拖拽到这里上传</p><p>支持扩展名:.xls .xlsx .csv .et .ett .xlt...</p></div></el-upload>
</div>
export default {name: 'batchImport',data() {return {fileList: [],}},methods: {onchange(file, fileList) {console.log(file, fileList, 'file, fileList)')if(fileList.length > 1) {fileList.splice(0, 1)	// 将第一个删掉}// 写在if外面,因为:第一个只有一个文件时也许将fileList保存在this.fileList里面this.fileList = fileList},},
}

在这里插入图片描述

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 机械学习—零基础学习日志(高数18——无穷小与无穷大)
  • C++笔记---类和对象(中)
  • 【Matlab】快速傅里叶变换fft代码(单边谱)
  • 猫头虎分享疑难杂Bug:error: subprocess-exited-with-error 解决方案
  • docker 建木 发版 (详细教程)
  • Open Interpreter - 开放解释器
  • 无人机工程师技术高级证书详解
  • Python爬虫基础:爬取网页内容解析标题
  • 8.2 grafana上导入模板看图并讲解告警
  • 【论文笔记】4D Millimeter-Wave Radar in Autonomous Driving: A Survey
  • JavaSE面试篇章——一文干破Java集合
  • (二)测试工具
  • 数字孪生赋能智慧城市大脑智建设方案(可编辑65页PPT)
  • 简单了解下Spring中的各种Aware接口实现依赖注入
  • 【单片机毕业设计选题24099】-室内空气质量检测及净化系统
  • 收藏网友的 源程序下载网
  • 【跃迁之路】【477天】刻意练习系列236(2018.05.28)
  • docker-consul
  • k个最大的数及变种小结
  • tensorflow学习笔记3——MNIST应用篇
  • WePY 在小程序性能调优上做出的探究
  • 百度小程序遇到的问题
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 给github项目添加CI badge
  • 关于List、List?、ListObject的区别
  • 基于遗传算法的优化问题求解
  • 容器服务kubernetes弹性伸缩高级用法
  • 微信开放平台全网发布【失败】的几点排查方法
  • 线上 python http server profile 实践
  • RDS-Mysql 物理备份恢复到本地数据库上
  • 整理一些计算机基础知识!
  • ​ ​Redis(五)主从复制:主从模式介绍、配置、拓扑(一主一从结构、一主多从结构、树形主从结构)、原理(复制过程、​​​​​​​数据同步psync)、总结
  • ​必胜客礼品卡回收多少钱,回收平台哪家好
  • ​经​纬​恒​润​二​面​​三​七​互​娱​一​面​​元​象​二​面​
  • #AngularJS#$sce.trustAsResourceUrl
  • #FPGA(基础知识)
  • #Js篇:单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • (保姆级教程)Mysql中索引、触发器、存储过程、存储函数的概念、作用,以及如何使用索引、存储过程,代码操作演示
  • (附源码)springboot 房产中介系统 毕业设计 312341
  • (十三)Maven插件解析运行机制
  • (转)Android学习系列(31)--App自动化之使用Ant编译项目多渠道打包
  • (转)Oracle 9i 数据库设计指引全集(1)
  • .bat批处理(五):遍历指定目录下资源文件并更新
  • .NET 5.0正式发布,有什么功能特性(翻译)
  • .Net Core 微服务之Consul(三)-KV存储分布式锁
  • .NET gRPC 和RESTful简单对比
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地中转一个自定义的弱事件(可让任意 CLR 事件成为弱事件)
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?
  • .NET/C# 使用反射调用含 ref 或 out 参数的方法
  • .NET+WPF 桌面快速启动工具 GeekDesk
  • .NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.
  • .NET编程C#线程之旅:十种开启线程的方式以及各自使用场景和优缺点
  • .Net的C#语言取月份数值对应的MonthName值
  • .NET序列化 serializable,反序列化
  • .NET中winform传递参数至Url并获得返回值或文件