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

  • 政府征用土地补偿标准2021年
  • 外国驻华使领馆自用车辆
  • 考税务师的报考条件
  • 综合收入扣税
  • 汇总记账凭证会计核算形式与科目汇总表
  • 小规模计提增值税
  • 印花税减半征收吗
  • 退回以前年度教育附加费
  • 免抵退税额为什么等于出口价乘以退税率
  • 企业注销了,报表的银行存款还有余额
  • 在银行开资信证明的流程
  • 法人投资转入旧机器无发票怎么入账?
  • 怎么合理规范地避免企业涉税风险?
  • 国税申报填错了怎么办
  • 混营纳税人有什么影响
  • 高新技术企业退税比例是多少
  • 未分配利润怎么填
  • 小规模季报还没报改了一般纳税人
  • 财政拨款结转的借贷方向
  • w10系统怎么连接
  • 如何在Excel中合并计算
  • 财务考核指标表
  • 公司给员工交纳社保
  • 财产转让所得怎么申报个税
  • 行业收购溢价
  • 自己怎么做电脑系统
  • 笔记本电脑按键掉了怎么修
  • bios里头没有usb功能怎办
  • 个税代扣代缴手续费返还增值税税率
  • linux限制用户访问文件
  • 企业房产税如何计算方法
  • macOS Big Sur 11.3 公开测试版正式推送(附更新内容)
  • 发行股票溢价计入哪里
  • 逾期未收回包装物押金增值税怎么算
  • yolov5怎么改进
  • php gd库
  • vue添加css
  • 动态模型图如何制作
  • 建筑企业结转成本的依据是什么
  • php fopen()
  • 通行费发票电子化 机场路
  • 公司基本户可以异地开户吗
  • 如何用wordpress
  • 借贷记账法的记账规则是
  • 单一窗口报关是指什么
  • 劳务发票去哪里开
  • 物业合并利润表怎么填
  • 纳税人按照月度或者季度的实际利润额预缴有困难的
  • 差旅费税前扣除政策
  • 工资是什么?包括哪些
  • 扣除未结话费是什么意思
  • 收到国外客户的货款怎么做账
  • 企业每月利润多少合适
  • 企业利润分配应当遵循的原则
  • 承兑汇票兑现账户是什么
  • 建筑单位工伤缴费标准
  • 押金可不可以抵房租
  • 产品成本计算中最基本的方法是
  • 公司贷款直接打收据吗
  • 预付账款跨年处理分录
  • 工会筹备金该按什么计算
  • 固定资产报废会计
  • 如何算增值税金额
  • 评估入账的无形资产能摊销吗
  • 消费税的科目设置在哪里
  • MS DTC 事务管理器无法启动的解决方案
  • macbook屏幕自动亮度调节
  • centos7安装yum报错
  • chkdsk命令有什么用
  • Node.js Sequelize如何实现数据库的读写分离
  • Setver、Share、Subst命令的使用方法
  • Unity3D脚本对预制件无效
  • 将字符串小写转换成大写
  • Android dispatchTouchEvent, onInterceptTouchEvent, onTouchEvent详解
  • unity data
  • jquery简单例子
  • [置顶]游戏名:chivalry2
  • 武汉市契税减免政策
  • 货物税费
  • 税务全国联网了吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设