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

  • steam怎么创建账户(steam怎么创建账号人机身份验证太难了过不了怎么办)

    steam怎么创建账户(steam怎么创建账号人机身份验证太难了过不了怎么办)

  • 苹果手机和平板怎么用一个ID(苹果手机和平板共用一个id,怎样避免同步)

    苹果手机和平板怎么用一个ID(苹果手机和平板共用一个id,怎样避免同步)

  • 指定电子邮件地址是什么(指定电子邮件地址是什么意思)

    指定电子邮件地址是什么(指定电子邮件地址是什么意思)

  • 为什么修改实名认证不符合条件(为什么修改实名认证显示网络异常)

    为什么修改实名认证不符合条件(为什么修改实名认证显示网络异常)

  • 苹果11打游戏发热吗(苹果11打游戏发热卡顿怎么办)

    苹果11打游戏发热吗(苹果11打游戏发热卡顿怎么办)

  • qq的离线和离线请留言有什么区别(qq的离线和离线请留言怎么写)

    qq的离线和离线请留言有什么区别(qq的离线和离线请留言怎么写)

  • 微信号只能用手机注册吗(微信号只能用手机登陆吗)

    微信号只能用手机注册吗(微信号只能用手机登陆吗)

  • 9600gt相当于现在什么显卡(9600gt相当于核显)

    9600gt相当于现在什么显卡(9600gt相当于核显)

  • 苹果手机美版无锁什么意思(苹果手机美版无锁和有锁的区别)

    苹果手机美版无锁什么意思(苹果手机美版无锁和有锁的区别)

  • p30分屏怎么操作(p30手机分屏功能)

    p30分屏怎么操作(p30手机分屏功能)

  • 相机的快门是什么意思(相机快门是干嘛的)

    相机的快门是什么意思(相机快门是干嘛的)

  • 朋友圈如何推广(朋友圈如何推广白酒文案)

    朋友圈如何推广(朋友圈如何推广白酒文案)

  • 微信互删为啥点赞还在(微信互删为什么还能看到好友)

    微信互删为啥点赞还在(微信互删为什么还能看到好友)

  • 交换机堆叠作用(交换机堆叠作用是什么)

    交换机堆叠作用(交换机堆叠作用是什么)

  • 苹果11pro max死机怎么重启(苹果11pro max死机重启不了)

    苹果11pro max死机怎么重启(苹果11pro max死机重启不了)

  • 抖音作品被限流怎么办(抖音作品被限流了是什么原因)

    抖音作品被限流怎么办(抖音作品被限流了是什么原因)

  • 华为手环怎么接不了电话(华为手环怎么接收微信消息)

    华为手环怎么接不了电话(华为手环怎么接收微信消息)

  • 微爱解除关系后还能恢复吗(微爱解除关系后对方知道吗)

    微爱解除关系后还能恢复吗(微爱解除关系后对方知道吗)

  • 微博怎么发长文(微博怎么发长文字)

    微博怎么发长文(微博怎么发长文字)

  • 智联招聘如何投简历(智联招聘如何投诉招聘公司的人)

    智联招聘如何投简历(智联招聘如何投诉招聘公司的人)

  • 快手怎么滑动切换视频(快手如何滑动)

    快手怎么滑动切换视频(快手如何滑动)

  • atman是什么手机(atman手机怎么样)

    atman是什么手机(atman手机怎么样)

  • qq邮箱照片怎么保存到手机(qq邮箱照片怎么压缩发送)

    qq邮箱照片怎么保存到手机(qq邮箱照片怎么压缩发送)

  • applewatch4和3区别(apple watch3和4)

    applewatch4和3区别(apple watch3和4)

  • 苹果会中病毒吗(苹果手机查杀病毒)

    苹果会中病毒吗(苹果手机查杀病毒)

  • win10下怎么设置OneDrive云删除文件时不要警告?(win10系统怎么设置)

    win10下怎么设置OneDrive云删除文件时不要警告?(win10系统怎么设置)

  • 出口退税 系统
  • 机器配件作价卖掉,如何做进项税转出
  • 以股抵债的会计分录
  • 2020年个体工商户税收政策超出额度怎么征收
  • 房租发票上税的分录怎么写?
  • 特许权使用费所得包括
  • 含运费的原材料会计分录
  • 银行抵债资产怎么管理
  • 买商铺返租金之套路
  • 利润的计算方法数学
  • 销售肉制品税率
  • 税务未抄报
  • 新企业所得税法规定的企业包括
  • 收到保险公司退款
  • 异地取款还有手续费吗
  • 原材料损失计入
  • 微信支付宝余额为零的表情包
  • 申请小型微利企业
  • 网络共享每次都要输入密码
  • windows7iis安装
  • 文件过滤什么意思
  • 预付工程款计入在建工程吗
  • 航空公司收取什么费
  • 任务栏变宽了怎么调回来win11
  • 小规模纳税人缴税标准是什么
  • 材料成本差异贷方表示
  • 在建工程进项税额
  • 关于企业发生的手续费及佣金支出的扣除标准
  • yolov5讲解
  • vue表单验证数字
  • 企业购进废旧厂房税率
  • 环境检测费做什么科目
  • 金税盘,税控盘Ukey价格
  • vue如何实现打印
  • 双重差分法(DID)
  • 劳务费发票差额征税
  • 瑞吉接送
  • 机器学习期末复习题
  • 自然人税收管理系统
  • 商品交换包括
  • 其他综合收益属于什么类
  • phpcms 1064错误的解决办法
  • 公司项目支付的钱叫什么
  • 大华摄像头海康威视录像机
  • 审计符合性测试
  • 小型公司怎么做账
  • SQLSERVER 2005的ROW_NUMBER、RANK、DENSE_RANK的用法
  • 企业账务处理程序的概念
  • 汇算清缴补缴所得税的报税利润表怎么报
  • 营业外支出什么科目借贷方向
  • 挂靠工程如何交纳税金帐务处理?
  • 河道管理费是附加税吗
  • 销售自产农产品的农民是增值税纳税人吗
  • 其他业务收入的二级科目
  • 如何理解非货币性资产
  • 原告起诉被告承担诉讼费
  • 销售方运输收入分录
  • 新准则建筑业会计核算
  • 公司买护肤品发票如何入账
  • 机票报销需要什么单据
  • SQL Transcation的一些总结分享
  • xp系统提升cpu最高性能
  • window10预览在哪里找
  • 更新版本
  • 主板bios无法重置
  • msg0是什么文件
  • windows对高分屏怎么这么差
  • quick cocos2dx-Lua中的自定义事件的使用
  • linux timeline
  • node.js 开发工具
  • centos上安装邮件服务器
  • linux内核讲解
  • javascript的主要内容
  • js基础知识
  • 每天一篇日记
  • JavaScript While 循环 教程
  • 在androidstudio中,如何改变图片的位置
  • 税务代收是什么意思
  • 银行理财收入如何记账
  • 广州市电子税务局怎样跨区申报税务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设