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

  • 小米手机自动亮度太暗怎么调(小米手机自动亮屏怎么解决)

    小米手机自动亮度太暗怎么调(小米手机自动亮屏怎么解决)

  • 如何制作水印(如何制作水印图片logo透明)

    如何制作水印(如何制作水印图片logo透明)

  • 华为手机字体变小怎么调(华为手机字体变小了怎么回事)

    华为手机字体变小怎么调(华为手机字体变小了怎么回事)

  • 怎么查看谁星标了自己(怎么看谁星标了我)

    怎么查看谁星标了自己(怎么看谁星标了我)

  • icloud照片是什么意思(icloud照片是什么的)

    icloud照片是什么意思(icloud照片是什么的)

  • 华为鲲鹏产业是什么(华为鲲鹏公司)

    华为鲲鹏产业是什么(华为鲲鹏公司)

  • webshell攻击是什么(web攻击原理)

    webshell攻击是什么(web攻击原理)

  • 电脑没有音响可以有声音吗(电脑没有音响可以放出声音吗)

    电脑没有音响可以有声音吗(电脑没有音响可以放出声音吗)

  • 微视红包一天能领几个(微视红包一天可领几次)

    微视红包一天能领几个(微视红包一天可领几次)

  • 路由器上网设置连接不上(第一次装路由器上网设置)

    路由器上网设置连接不上(第一次装路由器上网设置)

  • 苹果付款方式验证不了(苹果付款方式验证不了微信)

    苹果付款方式验证不了(苹果付款方式验证不了微信)

  • 苹果手机电话图标没了怎么办(苹果手机电话图标不见了怎么恢复)

    苹果手机电话图标没了怎么办(苹果手机电话图标不见了怎么恢复)

  • axmp是什么(axmp12是什么意思)

    axmp是什么(axmp12是什么意思)

  • 怎么增加ipad内存(如何增加ipad存储空间)

    怎么增加ipad内存(如何增加ipad存储空间)

  • 手机hz是什么意思(手机hz是什么单位名称)

    手机hz是什么意思(手机hz是什么单位名称)

  • 爱奇艺会员连续包月可以随时取消吗(爱奇艺会员连续包月只开一个月)

    爱奇艺会员连续包月可以随时取消吗(爱奇艺会员连续包月只开一个月)

  • 微信好友的聊天记录删了还能恢复吗(微信好友的聊天记录怎么保存下来)

    微信好友的聊天记录删了还能恢复吗(微信好友的聊天记录怎么保存下来)

  • 小米的智能出行在哪里打开(小米的智能出行是什么)

    小米的智能出行在哪里打开(小米的智能出行是什么)

  • 乐视手机怎么关手电筒(乐视手机怎么关闭广告)

    乐视手机怎么关手电筒(乐视手机怎么关闭广告)

  • 华为解锁热点资讯怎么关闭(华为开锁热点资讯)

    华为解锁热点资讯怎么关闭(华为开锁热点资讯)

  • 三星s5支持联通4g吗(三星galaxy s5支持电信卡吗)

    三星s5支持联通4g吗(三星galaxy s5支持电信卡吗)

  • iphonex设置接通震动(苹果x来电接听方式)

    iphonex设置接通震动(苹果x来电接听方式)

  • 华为手机微信保存的图片找不到(华为手机微信保存的图片在哪个文件夹)

    华为手机微信保存的图片找不到(华为手机微信保存的图片在哪个文件夹)

  • oppo手机时间怎么显示横的(oppo手机时间怎么设置)

    oppo手机时间怎么显示横的(oppo手机时间怎么设置)

  • 索尼xperia1怎么设置开机动画

    索尼xperia1怎么设置开机动画

  • 华为p30可以用5g吗(华为p60是5g吗)

    华为p30可以用5g吗(华为p60是5g吗)

  • 税控盘维护费会计分录怎么写
  • 税务局纳税申报网站官网
  • 新冠肺炎捐赠账务处理
  • 注册资本印花税按年申报还是按次申报
  • 男的交社保有什么好处
  • 金融企业贷款损失准备金税前扣除计算
  • 零售行业会计核算方法
  • 小规模纳税人购置税控设备
  • 差旅费报销会计科目
  • 内账应收应付算利润吗
  • 个人所得税免征项目有哪些
  • 冲暂估成本的会计分录
  • 销售礼盒增值税税率
  • 增值税税率零税率
  • 节日现金福利征收个人所得税吗
  • 软件企业怎么享受三免两减半
  • 代扣车船税的手续有哪些
  • 融资租赁开始时的账务处理
  • 宿舍管理制度规定心得体会范文
  • 一次性领取的年金 税率表
  • 固定资产管理的论文
  • 会议展览服务费需要交印花税吗
  • 实收资本的期初余额在借方还是贷方
  • win10安装版u盘安装
  • 收费公路通行费财政电子票据可以抵扣吗
  • 住房公积金领出来用了影响以后买房贷款吗
  • 翡翠湾攻略
  • php购物车订单处理
  • 特征融合add
  • docker_practice
  • 报税财务报表怎么申报
  • 增值税小规模纳税人
  • 工会收取的工会经费应缴纳增值税
  • 软件企业该怎么发展起来
  • 新办企业装修会计分录
  • 企业所得税报表查询怎么查
  • 建筑业服务包含哪些?
  • 财政直接支付的概念
  • 股票买卖怎么操作
  • 代扣代缴公积金现金流量
  • 租金摊销会计分录
  • 成品油生产库存
  • 员工在异地缴纳社保,公司还能上吗
  • 选用劳务派遣人员
  • 企业利润总额计算例题及答案
  • 价外费用计入哪个科目
  • 业务招待费会计科目
  • 分公司做账报税
  • 投资性房地产公允价值变动借贷方向
  • 未取得发票的固定资产入账规定
  • 财务人员需要填报的报表有哪些
  • sql修改表的所属空间
  • redhat6.5安装图形界面
  • msi安装错误代码2503
  • Ubuntu上安装anaconda
  • mac修改用户名称
  • centos5安装步骤
  • linux系统中
  • linux磁盘配额实验报告
  • win10系统更新后
  • winxp系统修复 不重装软件
  • win10驱动备份在哪里
  • mysqld是什么进程
  • 安卓软件集
  • android@localhost#1
  • myeclipse2013安装配置
  • qq自动登出
  • python生成器有几种写法
  • 如何把多个文本文档合并成一个且分行不重叠
  • js实现功能
  • js使用正则表达式对json对象的校验
  • javascript教程完整版
  • 山东省省级政务服务区有哪些
  • 河南医疗保险网上怎么缴费截止时间
  • 移动退订业务怎么恢复
  • 开量贩ktv一年能赚多少
  • 东莞办理房产证在哪里预约
  • 中国移动话费可以交水电费吗
  • 车辆购置税查询官网
  • 中国十大经济农村
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设