element-ui文件上传 做类型大小的限制
上代码:
<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文件上传 做类型大小的限制的更多相关文章
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- element中文件上传
vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...
- PHP文件上传错误类型及说明
从 PHP 4.2.0 开始,PHP 将随文件信息数组一起返回一个对应的错误代码.该代码可以在文件上传时生成的文件数组中的 error 字段中被找到,也就是 $_FILES['userfile'][' ...
- 文件上传 MIME类型检测
简介 MIME(Multipurpose Internet Mail Extensions)多用途网络邮件扩展类型,可被称为Media type或Content type, 它设定某种类型的文件当被浏 ...
- JavaScript检测文件上传的类型与大小
$(function(){ $("#files").change(function(){ // 添加允许上传的文件类型 var exts = new Array(); exts[0 ...
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- 设置IIS7文件上传的最大大小 maxAllowedContentLength,maxRequestLength
当上传一个超过30M的文件时,服务器会重定向至404.13页面,报错如下: HTTP Error 404.13 - Not Found The request filtering module is ...
- php文件上传判断类型
上传文件对象在$_FILES['Filedata']对象中,临时路径是tmp_name,判断是上传文件是否为真实图片方法很多,我用的是这个: if( !@getimagesize( $_FILES[' ...
- element ui图片上传方法
<!--商品图片--> <template v-slot:product_cover> <el-upload list-type="picture-card&q ...
随机推荐
- NOIP 2008 传球游戏
洛谷 P1057 传球游戏 洛谷传送门 JDOJ 1536: [NOIP2008]传球游戏 T3 JDOJ传送门 Description 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次, ...
- SpringMVC的乱码问题
1:表单提交controller获得中文参数后乱码解决方案 注意: jsp页面编码设置为UTF-8 form表单提交方式为必须为post,get方式下面spring编码过滤器不起效果 <%@ p ...
- Centos7安装MySQL(多图)
文章目录 一.在线安装1.替换网易yum源2.清理缓存3.下载rpm文件4.安装MySQL数据库二.本地安装1.上传MySQL安装包2.安装依赖的程序包3.卸载mariadb程序包4.安装MySQL程 ...
- 在CentOS 7 中安装Docker
https://birdteam.net/135360 sudo systemctl enable docker sudo systemctl start docker
- hdu 6620 Just an Old Puzzle(N数码问题)
http://acm.hdu.edu.cn/showproblem.php?pid=6620 N数码问题: n*n矩阵,里面填着1—n*n-1,还有1个空格, 通过上下左右移动空格的位置, 使矩阵里的 ...
- hive基础知识四
1. hive表的数据压缩 1.1 数据的压缩说明 压缩模式评价 可使用以下三种标准对压缩方式进行评价 1.压缩比:压缩比越高,压缩后文件越小,所以压缩比越高越好 2.压缩时间:越快越好 3.已经压缩 ...
- 以V8中js源码为例了解GitHub查看代码功能
GitHub作为开源仓库,许多开源项目仓库这里,当然不乏十分优秀的,比如Node.V8,我一直比较好奇js源码,像java的话,因为环境是JDK,我们结合IDE很容易就能跳转到其源码内部去查看实现,但 ...
- Ajax 与 Django
目录 Django与AJAX orm优化查询: MTV 与 MVC模型 choices 参数 update 与 save的区别 AJAX导入: Jquery 实现AJAX ajax基本语法结构 原生J ...
- 第6课 nullptr_t和nullptr
一. nullptr与nullptr_t (一)nullptr_t是一种数据类型,而nullptr是该类型的一个实例.通常情况下,也可以通过nullptr_t类型创建另一个新的实例. (二)所有定义为 ...
- express框架,使用 static 访问 public 内静态文件
使用 express 生成 node 服务器后,我们需要访问放在public文件夹内的静态文件,如上传的图片 我们需要在app.js中添加配置项: app.use('/public',express. ...