位置: 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五个核心概念)

  • 出口企业的退税属不属于纳税总额
  • 增值税税负率是含税还是不含税
  • 稳岗补贴属于不征税收入吗
  • 待抵扣进项税额和待认证进项税额的区别
  • 小规模纳税人开普票要交税吗
  • 销售中央空调并安装账务处理
  • 实际缴纳增值税税额是什么意思
  • 给员工发的慰问短信
  • 从两处领取工资,个人所得税应该如何申报缴纳?
  • 其他应收款怎么分析
  • 个人公寓出租给公司要交税吗?
  • 银行存款二级明细科目有哪些
  • 建筑安装预缴增值税
  • 会计分录如何试算出来的
  • 基本户和一般户的区别和用途
  • 删除文件时错误是怎么回事
  • 腾讯电脑管家流量监控不显示
  • 压缩包损坏修复软件
  • 在win7系统中文件属性有哪些
  • tersafe.dll
  • Win10组策略怎么进
  • 安置残疾人就业单位城镇土地使用税
  • 先出库还是先发货
  • 永久性差异会计分录
  • php中的异常和错误怎么写
  • 广播影视服务需要许可证吗
  • php操作字符串
  • 拨缴经费收入进行账务处理
  • elementui的upload组件详解
  • SE注意力机制加在什么位置
  • 什么是进项票什么是成本票
  • 固定资产捐赠的账务处理
  • 怎么保证发票是真的
  • java枚举写法
  • 企业提前还贷为什么违约
  • 开办费计入哪个会计科目
  • 流动资产与资产总额的比率叫什么比率
  • 织梦怎么调用当前栏目下的文章
  • mongodb主从复制和副本集架构有什么联系和区别
  • pos机到账流水算个人收入吗
  • 普通发票销货清单
  • sql查询服务器硬件信息
  • sqlserver2008密码要求
  • 长期股权投资追溯调整有几种情况
  • sqlserver、mysql获取连接字符串步骤
  • 固定资产盘亏账务处理的问题
  • 固定资产的资本化和费用化
  • 应付给股东的利润是什么科目
  • 应交增值税借贷方发生额表示
  • 外购货物用于在建工程分录
  • 投标保证金退回是不是没中标
  • 建筑行业总产值占我国GDP的比重
  • 如何理解其他应收款的概念
  • 什么是交易价格指数
  • 建账过程中应注意的事项
  • mysql优化配置文件
  • 查找星期几
  • 脱机文件怎么办
  • 无法打开vmx86
  • lsf.exe是什么
  • vs显示进程已退出
  • mac如何重装系统win10
  • macappstore下载不了软件
  • win8.1进不了系统
  • 命令行查看硬盘序列号
  • win降级10.3.3
  • windows7更新补丁后蓝屏
  • 为什么无法退出
  • cocos2d-js教程
  • cocos2dx4.0入门
  • JavaScript对象的创建
  • jquery动态添加样式
  • Adding iAd in your App from Unity3d
  • js function.call
  • javascript的
  • js的delegate
  • 文化事业建设费是什么税
  • 现在是一般纳税人,属于小规模发生的业务怎么开票
  • 办公电话怎么设置铃声
  • 亳州自来水缴费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设