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 相关文章推荐
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
vue文件运行的方法教学
Feb 12 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
Vue混入mixins滚动触底的方法
Nov 22 Javascript
node.js基础知识汇总
Aug 25 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分页显示制作详细讲解
2008/11/19 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
javascript一点特殊用法
2008/05/28 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python线程中同步锁详解
2018/04/27 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python谱减法语音降噪实例
2019/12/18 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
详解Python IO编程
2020/07/24 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
会计专业推荐信
2013/10/29 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
文明市民先进事迹
2014/05/15 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers