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

  • 445端口是什么服务(445端口是什么服务54)

    445端口是什么服务(445端口是什么服务54)

  • 华为b5如何戴耳朵上(华为b5如何佩戴耳朵)

    华为b5如何戴耳朵上(华为b5如何佩戴耳朵)

  • 苹果11的4G内存够用吗(iphone 11 4gb)

    苹果11的4G内存够用吗(iphone 11 4gb)

  • 三星Galaxy Fold怎么关机(三星galaxyfold怎么截屏)

    三星Galaxy Fold怎么关机(三星galaxyfold怎么截屏)

  • 小米9后盖碎了(小米9后盖碎了有必要去修吗)

    小米9后盖碎了(小米9后盖碎了有必要去修吗)

  • qq实名认证获取地区失败怎么办(qq实名检测)

    qq实名认证获取地区失败怎么办(qq实名检测)

  • 苹果x黑屏转圈怎么办(苹果x黑屏转圈圈打不开怎么办)

    苹果x黑屏转圈怎么办(苹果x黑屏转圈圈打不开怎么办)

  • 电脑上不显示苹果相册(电脑上不显示苹果热点)

    电脑上不显示苹果相册(电脑上不显示苹果热点)

  • 荣耀9x耳机插上没反应(荣耀手机耳机插上去没反应要重启一下才好,什么情况)

    荣耀9x耳机插上没反应(荣耀手机耳机插上去没反应要重启一下才好,什么情况)

  • 苹果11怎么控制空调(苹果11怎么控制美的空调)

    苹果11怎么控制空调(苹果11怎么控制美的空调)

  • vivox30手机卡槽在哪里(vivox30手机卡槽打不开怎么办)

    vivox30手机卡槽在哪里(vivox30手机卡槽打不开怎么办)

  • wlan静态ip是什么(wifi静态ip什么意思)

    wlan静态ip是什么(wifi静态ip什么意思)

  • 认证失败是什么意思(认证失败提醒)

    认证失败是什么意思(认证失败提醒)

  • vivo手机可以投屏电视吗(vivo手机可以投屏小米电视吗)

    vivo手机可以投屏电视吗(vivo手机可以投屏小米电视吗)

  • 台式电脑fn是哪个键(台式电脑上fn是哪个键)

    台式电脑fn是哪个键(台式电脑上fn是哪个键)

  • iphonex什么时候上市的(iphoneX什么时候生产)

    iphonex什么时候上市的(iphoneX什么时候生产)

  • 华为备忘录如何设置时间(华为备忘录如何导出)

    华为备忘录如何设置时间(华为备忘录如何导出)

  • 爱奇艺登入记录在哪里(爱奇艺查看登录历史)

    爱奇艺登入记录在哪里(爱奇艺查看登录历史)

  • 荣耀10青春版可以开空调吗(荣耀10青春版可以升级鸿蒙3.0系统吗)

    荣耀10青春版可以开空调吗(荣耀10青春版可以升级鸿蒙3.0系统吗)

  • 微信每天限额一万怎么提升(微信每天限额一千怎么办)

    微信每天限额一万怎么提升(微信每天限额一千怎么办)

  • Linux下运行jar包的方法介绍(linux直接运行jar)

    Linux下运行jar包的方法介绍(linux直接运行jar)

  • ashmaisv.exe进程安全不安全 ashmaisv进程信息查询(aliwssv.exe是什么进程)

    ashmaisv.exe进程安全不安全 ashmaisv进程信息查询(aliwssv.exe是什么进程)

  • vue面试题八股文简答大全 让你更加轻松的回答面试官的vue面试题(vue面试题视频)

    vue面试题八股文简答大全 让你更加轻松的回答面试官的vue面试题(vue面试题视频)

  • dedecms后台功能之支付接口设置介绍(dedecms使用教程)

    dedecms后台功能之支付接口设置介绍(dedecms使用教程)

  • 个人所得税跨区域可以申报吗
  • 会费收入增值税申报
  • 计提印花税会计凭证怎么做
  • 什么是反避税税率
  • 税务局代个人开发票
  • 当月红冲发票账务怎么处理
  • 所得税申报资产不允许为0?
  • 个人所得税如果两份工作怎么扣
  • 打印的电子发票需要盖章么
  • 工程结算可以转什么科目
  • 会计差错更正流程
  • 制造费用的借方和贷方各表示什么
  • 事假扣薪
  • 增值税发票小规模2023
  • 单边征收
  • 低税负销售激励策略的设计与案例!
  • 个人买卖二手房增值税
  • 建筑企业包工包料
  • 购买固定资产货款未付
  • 政府高薪补贴
  • 第三方要求
  • 新版edge浏览器历史记录
  • 如何防御黑客入侵
  • php测试成功的邮件是什么
  • 在win7中,如何创建一个TXT文件
  • 一年以上预收账款
  • win10版本2004和20h2
  • 企业所得税预缴税率是多少
  • 差额银行承兑汇票
  • 如何判定增值税发票真伪
  • 如何计算企业所得税税负
  • php调用图片
  • 精灵烟囱的形态判断
  • auto.js 教程
  • 一般纳税人哪些行业可以简易计税
  • dedecms安装步骤
  • dedecms调用页面
  • dedecms配置
  • 盘盈材料会计分录
  • 法人不发工资可以吗
  • 不动产进项税抵扣规定一次性抵扣
  • mysql 5.5.x zip直接解压版安装方法
  • 营改增之后账务怎么处理
  • 委托加工物资科目贷方登记的内容有什么
  • 服务费发票的税率
  • 收到员工交来的宿舍费
  • 社保缴费如何做账
  • 红字发票销项税额账务处理
  • 企业所得税资产总额在哪里填列
  • 其他权益工具投资公允价值变动计入什么科目
  • 销售材料购买方会计分录
  • 合同已执行但有错误怎么办
  • 哪些业务可以开专票
  • 建筑业红字发票如何开
  • 可供分配利润是未分配利润吗
  • 人力成本工资总额指应发工资
  • 期末留抵税额可以退税吗
  • 股东现金存入公司账户,该如何做账?
  • 固定资产清理包括什么会计科目
  • 发出计价是什么意思
  • 兼职会计做什么工作
  • sql server如何使用
  • 快速调用cmd
  • macos终端删除文件
  • 系统没有wmi服务选项
  • win10系统预览版
  • windows 10 20h2推送
  • win10预览版好吗
  • window10外接摄像头怎么启用
  • nodejs 代码加密
  • jquery插件怎么用到自己的网站
  • windows安装python pip
  • python爬虫视频教程
  • js 选择语句
  • unity导出exe没反应
  • 湖南城乡居民医疗保险咨询电话
  • 贵州地税网上申报大厅
  • 三星电视投屏显示不支持当前文件
  • 成都税务怎么查询社保缴费记录
  • 监察室主任岗位职责
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设