Element-ui upload上传文件限制的解决方法


Posted in Javascript onJanuary 22, 2021

问题

Element-ui upload上传文件限制的解决方法

在accept中添加上传文件的类型只能起到“表面”作用,选择“所有文件”之后,还是可以上传任何类型的文件,根本起不到限制作用。

解决办法

在before-upload(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。)钩子里去做判断。这里有一个坑,当你设置了 :auto-upload="false"的时候, 这个钩子是不会被触发的,因此也可以在on-change中做判断。

上代码

// :before-upload或者:on-change绑定的方法
beforeUpload(file, fileList) {
   if (file.size / (1024 * 1024) > 500) {  // 限制文件大小
     this.$message.warning(`当前限制文件大小不能大于500M`)
     return false
   }
   
   let suffix = this.getFileType(file.name) //获取文件后缀名
   let suffixArray = ['jpg', 'png', 'jpeg', 'gif'] //限制的文件类型,根据情况自己定义
   if (suffixArray.indexOf(suffix) === -1) {
     this.$message({
       message: '文件格式错误',
       type: 'error',
       duration: 2000
     })
   }
   return suffixArray
 },
 getFileType(name) {
   let startIndex = name.lastIndexOf('.')
   if (startIndex !== -1) {
     return name.slice(startIndex + 1).toLowerCase()
   } else {
     return ''
   }
 }

到此这篇关于Element-ui upload上传文件限制的解决方法的文章就介绍到这了,更多相关Element upload上传限制内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 上下banner替换具体实现
Nov 14 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
js canvas实现五子棋小游戏
Jan 22 #Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
element-ui 弹窗组件封装的步骤
Jan 22 #Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 #Javascript
原生js实现放大镜组件
Jan 22 #Javascript
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
You might like
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
js中运算符&& 和 || 的使用记录
2014/08/21 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
记帐员岗位责任制
2014/02/08 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript