上代码:

<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. linux防止恶意采集攻防战

    这两天ytkah开发的一个中大型项目被人盯上了,网站打开非常慢,查看了一下cpu.内存使用情况,30%左右占用不高,网络上下行就比较大了,IO实时流量达到40MB,IO总流量更是7TB,非常大的数据量 ...

  2. 架构篇 | 带你轻松玩转 LAMP 网站架构平台(一)

    作者 | JackTian 微信公众号 | 杰哥的IT之旅(ID:Jake_Internet) 转载请联系授权(微信ID:Hc220066)备注:来自博客园 1.什么是 LAMP 架构? LAMP 架 ...

  3. 新版Notepad++加十六进制查看的插件HexEditor(转载+总结)

    用到hex文件查看,老版本的notepad++是可以安装的,新版本的是安装不了,这个差评啊, 但是网上有方法:https://github.com/chcg/NPP_HexEdit/releases下 ...

  4. USACO Roadblock

    洛谷 P2176 [USACO14FEB]路障Roadblock 洛谷传送门 JDOJ 2406: USACO 2014 Feb Silver 2.Roadblock JDOJ传送门1 JDOJ 24 ...

  5. react使用ant design pro时的滑动图片组件

    react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...

  6. Pandas | 13 索引和选择数据

    Pandas现在支持三种类型的多轴索引; 编号 索引 描述 1 .loc() 基于标签 2 .iloc() 基于整数 3 .ix() 基于标签和整数 .loc() Pandas提供了各种方法来完成基于 ...

  7. 链接指示:extren"C"

    C++程序有时需要调用其他语言编写的函数,最常见的是调用C语言编写的函数.像所有其他名字一样,其他语言中的函数名字也必须在C++中进行声明,并且该声明必须指定返回类型和形参列表.对于其他语言编写的函数 ...

  8. Excel地址

    这题想了一个小时,也只得了66分,并且是一道看起来很简单的题…… 贴出代码,留给日后的自己 #include <stdio.h> #include <memory.h> #in ...

  9. Java class 和public class 区别

    1.类的访问权限 为了控制某个类的访问权限,修饰词必须出现在关键字class之前.例如:public class Student {}    在编写类的时候可以使用两种方式定义类:    (A)pub ...

  10. 【技术博客】使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试

    目录 使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试 简介 PhpStorm中的远程开发 1. 配置服务器 2. 配置路径对应 3. 配置同步 4. 进行代码同步 5. 优点 ...