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

  • 华为手机桌面应用图标消失怎么调出来(华为手机桌面应用怎么恢复)

    华为手机桌面应用图标消失怎么调出来(华为手机桌面应用怎么恢复)

  • qq远程控制对方电脑能看到对方电脑的照片吗(qq远程控制对方电脑能看到对方人吗)

    qq远程控制对方电脑能看到对方电脑的照片吗(qq远程控制对方电脑能看到对方人吗)

  • 腾讯vip设置几个人用(腾讯视频会员可以几个人用怎么设置)

    腾讯vip设置几个人用(腾讯视频会员可以几个人用怎么设置)

  • 华为不显示可用运存了(华为没有可用的移动网络是怎么回事)

    华为不显示可用运存了(华为没有可用的移动网络是怎么回事)

  • 移动5g网络什么时候出(移动5g网络什么意思啊)

    移动5g网络什么时候出(移动5g网络什么意思啊)

  • qq会员等级怎么升级快(QQ会员等级怎么算)

    qq会员等级怎么升级快(QQ会员等级怎么算)

  • airpods摔了影响音质吗(airpods被摔了会不会有损音质)

    airpods摔了影响音质吗(airpods被摔了会不会有损音质)

  • 开通抖音小店需要具体什么条件(开通抖音小店需要缴纳多少保证金)

    开通抖音小店需要具体什么条件(开通抖音小店需要缴纳多少保证金)

  • 刚注册的淘宝号就异常了(刚注册的淘宝号怎么养)

    刚注册的淘宝号就异常了(刚注册的淘宝号怎么养)

  • 华为nova7pro屏幕刷新率多少赫兹(华为nova7pro屏幕多大)

    华为nova7pro屏幕刷新率多少赫兹(华为nova7pro屏幕多大)

  • 朋友圈里的图片怎么删掉(朋友圈里的图片怎么保存到相册里)

    朋友圈里的图片怎么删掉(朋友圈里的图片怎么保存到相册里)

  • 云分享是什么(云分享吧)

    云分享是什么(云分享吧)

  • 华为mate20解锁方式(华为mate20如何解锁屏幕)

    华为mate20解锁方式(华为mate20如何解锁屏幕)

  • ps怎么换字体渐变颜色(ps怎么给字体改渐变色)

    ps怎么换字体渐变颜色(ps怎么给字体改渐变色)

  • 0pp0a5参数配置(0ppo手机a55参数)

    0pp0a5参数配置(0ppo手机a55参数)

  • 快手直播间怎么显示人数(快手直播间怎么挂假人)

    快手直播间怎么显示人数(快手直播间怎么挂假人)

  • 微信怎么发送微云文件(微信怎么发送微信验证)

    微信怎么发送微云文件(微信怎么发送微信验证)

  • 虚拟化的四大特性(虚拟化的4个本质特征)

    虚拟化的四大特性(虚拟化的4个本质特征)

  • 苹果平板文件储存在哪(苹果平板中的文件管理在哪里)

    苹果平板文件储存在哪(苹果平板中的文件管理在哪里)

  • 荣耀手环4怎么打电话(荣耀手环4怎么添加门禁卡)

    荣耀手环4怎么打电话(荣耀手环4怎么添加门禁卡)

  • 为什么微信表情变成一排了(为什么微信表情特效不显示)

    为什么微信表情变成一排了(为什么微信表情特效不显示)

  • taskhost.exe是什么进程? taskhost.exe占用cpu的解决办法(taskhost window)

    taskhost.exe是什么进程? taskhost.exe占用cpu的解决办法(taskhost window)

  • HTML购物车示例(勾选、删除、添加和结算功能)(购物车html模板)

    HTML购物车示例(勾选、删除、添加和结算功能)(购物车html模板)

  • uni-app--》如何实现网上购物小程序(中上)?(uni-app实例教程)

    uni-app--》如何实现网上购物小程序(中上)?(uni-app实例教程)

  • 个体户转到个人要多少税
  • 季度所得税费用如何计提
  • 完税证明能作为理赔依据吗
  • 无形资产开发阶段
  • 支付境外技术服务费代扣代缴所得税账务处理
  • 律师事务所的账务流程
  • 支票去银行怎么进账
  • 进口货物关税计入成本吗
  • 最新出口退税申报流程
  • 发票开错了收入增多了当月分录如何红冲?
  • 普通发票红字冲销发票怎么操作
  • 设备税款
  • 复利现值系数和普通年金现值系数关系
  • 费用发票的种类
  • 个体户报税可以朋友代替吗
  • 税务编码如何快速查询
  • 增值税实际缴纳总额
  • 普通发票需要做分录吗?
  • 深圳税种核定需要申报吗
  • 外贸企业免征增值税
  • 个税申报已经申报如何更改
  • 分红 实缴比例
  • 收到的会费计入什么会计科目
  • 企业所得税税率表2023年最新
  • 关联企业借款利息税前扣除
  • 应交税费留底增值税
  • mac 磁盘未能分区
  • sysprep.exe是什么
  • 虚拟机中如何将文件移动到普通用户的家目录下
  • 处置固定资产简易计税怎么申报
  • 房产税存在往期未申报信息怎么处理
  • 农业合作社零申报流程
  • 如何防范税务风险
  • 电器维修公司买什么保险
  • 以前年度损益调整借贷方向
  • win11如何设置安装位置
  • win10启用网络发现保存后又变成了关闭
  • 收到汇算清缴退税账务处理
  • php自定义函数的语法格式
  • 新准则规定
  • 支付产品运输费怎么入账
  • php 构造方法
  • dl.php怎么打开
  • css实现背景图片变透明
  • 编程中char什么意思
  • 完美解决win10间歇性掉线
  • 织梦如何使用
  • 研发支出的账务怎么处理
  • 公司两个股东变更为一个股东,需要交税么
  • 向农业生产者收购的原木 进项
  • 建筑安装服务的进项税有哪些
  • 非广告性质的赞助支出
  • 通货膨胀有什么表现
  • 困难企业社保费返还
  • 企业季度预缴所得税怎么算
  • 代扣代缴增值税怎么做账
  • 应付账款现金折扣会计分录
  • 电子回单费用如何查询
  • sql server 触发器
  • win7设置繁体字
  • win10系统微软账号退不了怎么办
  • 快速删除指定位置的结点用单链表还是双链表
  • centos安装编译环境
  • reg.exe是什么东西?
  • win7如何开启飞行模式
  • win8系统没有无线网络连接
  • win8安全和维护在哪
  • 显示win7
  • opengl绘制三维图形代码
  • js opendialog
  • python中列表删除
  • 2012年腾讯股价多少
  • shell脚本实现文件移动、复制等操作
  • 使用image控件显示图片
  • jquery defaultvalue
  • jQuery EasyUI Pagination实现分页的常用方法
  • 税务申报热线电话
  • 河南省地方税务局公告2017年第4号
  • 黄金手镯可以卖出去吗
  • 白酒的消费税怎么算计算列题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设