位置: IT常识 - 正文

使用element-ui中的el-upload自定义上传(elemental ui)

编辑:rootadmin
使用element-ui中的el-upload自定义上传 题引:

推荐整理分享使用element-ui中的el-upload自定义上传(elemental ui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui怎么用,element ui,element-ui dialog,element_ui,elemental ui,elemental ui,element_ui,elementui怎么用,内容如对您有帮助,希望把文章链接给更多的朋友!

日常开发系统的时候,我们都会有上传文件的功能。但是用原生的文件上传是很繁琐的,那么我们都会选择使用UI组件库,如element-plus、ant-design等。这些UI组件库是非常容易上手且实用的,但是万恶的需求是奇怪多变的,我们单纯使用组件库默认的上传方式是不符合我们的需求的,如不自动上传、上传各个阶段时进行监听等,那这个时候我们使用 自定义上传 就显得肥肠合适。

正文:

我遇到的问题是选择阶段进行文件信息获取并进行特殊处理,并处理成手动上传,于是我很果断选择自定义上传来处理。下面直接放代码。

<el-uploadclass="upload-demo"ref="xlsUpload"action="":show-file-list="false":file-list="fileList":http-request="handleFileUpload">上传</el-upload>

当我们使用 自定义上传 的时候,需要两步

使用element-ui中的el-upload自定义上传(elemental ui)

1.把 action 赋值为空字符串 2.添加 :http-request"

当我们完成上面两步时,那么我们就可以在 http-request 对应的回调函数进行逻辑处理: 下面我简单写了一些常用的判断

// 自定义上传事件handleFileUpload({ file }) {// file里面包含所选择的文件信息// 如果文件类型不符合xls|xlsx,也可以进行其他的判断if (file.name.slice(-3) != "xls" && file.name.slice(-4) != "xlsx") {this.$message.error("上传文件只能是 XLS | XLSX 格式!");return false; }else{// 通过URL.createObjectURL可以获取文件的真实url,需要slice是因为前缀有blob:const fileUrl = URL.createObjectURL(file).slice(5)// 类型通过则把文件变成formData的形式,因为文件一般是formData数据const formData = new FormData();formData.append('file',file);// 发送网络请求... } },

就这么简单的就可以实现自定义上传,不再限制于UI组件库自带的上传方式,so easy。

结尾:

以上就是如何实现自定义上传的方法,很简单吧哈哈哈。觉得可以就帮忙点个赞。

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。 有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:

文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

本文链接地址:https://www.jiuchutong.com/zhishi/299156.html 转载请保留说明!

上一篇:【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind(javascript中文手册)

下一篇:【Vue】vuex-五个核心(vuex五个核心概念)

  • 印花税申报缴纳错误,怎么办
  • 隔月发票退回应该如何操作
  • 安全生产费实际发生必须是付款吗还是挂帐也可以
  • 工会建账选择哪个科目好
  • 贷款公司股权转让合法吗
  • 小规模纳税人超过500万可以不转一般纳税人吗
  • 短期借款会计核算
  • 长期借款科目核算的是企业的长期借款本金和利息
  • 双倍余额递减法考虑净残值吗
  • 供应商不给我们开发票,我怎么入账
  • 换汇成本跟进项有关系吗
  • 买粽子会计怎么做账
  • 高新技术企业优惠政策叠加
  • 付款信息和开票信息区别
  • 经营性现金净流量是什么意思
  • 差额征税和差额计税
  • 客户分批付款怎么说
  • bios设置技巧
  • mac如何改变用户名
  • 应交税费和应交税金的区别属于什么科目
  • 结转未交增值
  • 设备租赁公司怎么复制赚钱
  • 防疫物资费用会计处理
  • 鸿蒙系统网络差怎么解决
  • 系统还没完善
  • echarts w3c
  • linux系统已经得到了广泛的应用
  • 股权转让的条件和方式
  • 高薪技术企业研发费用标准
  • 小规模纳税人没有进项税
  • 当月不生产,生产成本怎么处理
  • 梵净山原名
  • Laravel5.5新特性之友好报错以及展示详解
  • yii2框架从入门到精通
  • 安卓跑ubuntu
  • 债务重组收益会计处理
  • php获取给定日期函数
  • 小微企业的季度所得税怎么计算
  • 固定资产捐赠的账务处理
  • php怎么调用图片
  • 投资收益的核算依据
  • 企业销售旧车如何开票
  • 辞退员工福利
  • 不能加计扣除的研发费用在辅助账怎么反映
  • rabbitmq中文手册
  • SQLite之Autoincrement关键字(自动递增)
  • mongodb4.4.2安装教程
  • 增值税进项发票勾选认证流程
  • 季度所得税申报错误,一定要更改吗
  • 现金流量表算财务报表吗
  • 金税四期能监控到公户吗
  • 实际购入成本包括增值税吗
  • 房产税是怎么样
  • 工商年报资产状况公示还是不公示
  • 个税手续费怎么计算
  • 制造费用怎么写
  • 库存商品怎么做表格
  • 车船税怎么抵扣进项
  • 设备基础属于什么基础
  • windowssys
  • centos6.10安装教程详解
  • 1sass.exe是什么程序
  • 如何通过mac找到具体地址
  • guardhp.exe是什么意思
  • win7升级win10系统版本软件还有吗
  • windows10version20h2的03
  • 为wdcp面板的lnmp服务器添加ipv6支持的方法介绍
  • windows8.1版本区别
  • js 模拟滑动
  • jquery滑动效果
  • oracle shell脚本
  • awk范围筛选
  • unity后期
  • 使用jquery实现的项目
  • position属性含义
  • 绿化项目利润
  • 丹麦个人所得税税率表
  • 咨询服务类公司的账务处理
  • 教育培训行业的发展前景
  • 北京交通政务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设