上代码:

<div class="filebox">
<el-upload class="upload-demo" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
      multiple :limit="limitnum" :on-exceed="handleExceed" :file-list="fileList" :beforeUpload="beforeAvatarUpload">
<el-button size="mini" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>

:beforeUpload="beforeAvatarUpload" 底下有方法重要在这里:
methods里面写beforeAvatarUpload这个方法

      beforeAvatarUpload(file) {
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg === 'xls'
const extension2 = testmsg === 'xlsx'
const isLt2M = file.size / 1024 / 1024 < 10
if(!extension && !extension2) {
this.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
});
}
if(!isLt2M) {
this.$message({
message: '上传文件大小不能超过 10MB!',
type: 'warning'
});
}
return extension || extension2 && isLt2M
}

想要什么限制加什么限制就好。

element-ui文件上传 做类型大小的限制的更多相关文章

  1. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  2. element中文件上传

    vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...

  3. PHP文件上传错误类型及说明

    从 PHP 4.2.0 开始,PHP 将随文件信息数组一起返回一个对应的错误代码.该代码可以在文件上传时生成的文件数组中的 error 字段中被找到,也就是 $_FILES['userfile'][' ...

  4. 文件上传 MIME类型检测

    简介 MIME(Multipurpose Internet Mail Extensions)多用途网络邮件扩展类型,可被称为Media type或Content type, 它设定某种类型的文件当被浏 ...

  5. JavaScript检测文件上传的类型与大小

    $(function(){ $("#files").change(function(){ // 添加允许上传的文件类型 var exts = new Array(); exts[0 ...

  6. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  7. 设置IIS7文件上传的最大大小 maxAllowedContentLength,maxRequestLength

    当上传一个超过30M的文件时,服务器会重定向至404.13页面,报错如下: HTTP Error 404.13 - Not Found The request filtering module is ...

  8. php文件上传判断类型

    上传文件对象在$_FILES['Filedata']对象中,临时路径是tmp_name,判断是上传文件是否为真实图片方法很多,我用的是这个: if( !@getimagesize( $_FILES[' ...

  9. element ui图片上传方法

    <!--商品图片--> <template v-slot:product_cover> <el-upload list-type="picture-card&q ...

随机推荐

  1. Python 字符串内置方法笔记

    一. 大小写转换 ① capitalize() capitalize() #字符串首字母大写 >>> str0 = 'hello World' >>> str0.c ...

  2. 预计阅读时间核心jS代码

    <script type="text/javascript"> jq(document).ready(function() { var read_time=jq(&qu ...

  3. nginx 静态资源服务

    1.文件压缩 location ~ .*\.(jpg|gif|png)$ { gzip on(开启); gzip_http_version 1.1(版本); gzip_comp_level 2(压缩比 ...

  4. mysql在windows(含客户端工具)及linux(yum)环境下安装

    下载 地址:https://dev.mysql.com/downloads/ windows安装包下载 linux安装包下载 https://dev.mysql.com/downloads/mysql ...

  5. Pandas | 15 窗口函数

    为了处理数字数据,Pandas提供了几个变体,如滚动,展开和指数移动窗口统计的权重. 其中包括总和,均值,中位数,方差,协方差,相关性等.本章讨论的是在DataFrame对象上应用这些方法. .rol ...

  6. Layui 必填验证

    lay-verify="required"

  7. pytest--命令行常用参数

    前戏 在python中,大家听到最多的单元测试框架就是unittest和pytest了,而pytest有很多的功能,甩unittest几条街 我们在使用pytest时,要遵循pytest的命名规则: ...

  8. set(集合)的使用方法

    1.普通集合set 直接定义一个set具有动态有序和去重的功效,不再赘述. 如果要实现set时从大到小排序(desc)的,只需要在定义的时候指定“大于符号”,即greater<class> ...

  9. leetcode-19:给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点。

    /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * Lis ...

  10. Pod Preset玩转K8S容器时区自动配置

    缘由默认的情况,在K8S里启动一个容器,该容器的设置的时区是UTC0,但是对于很多客户而言,其主机环境并不在UTC0.例如中国客户在UTC8.如果不把容器的时区和主机主机设置为一致,则在查找日志等时候 ...