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 ...
随机推荐
- Python基础A(执行方式---注释)
执行Python程序的两种方式 交互式(jupyter) 优点:运行一句,执行一句 缺点:关闭即消失 命令行式(pycharm) 优点:可以一直保存下去 缺点:全部写完才能调试bug 虽然txt问价可 ...
- mybatis学习4
QL99中的连接查询 连接查询 交叉连接 select * from A,B; 内连接 隐式内连接 select * from A,B where 条件 显示内连接 select * fr ...
- 将python项目.py文件打包成.exe文件
安装pyinstaller包 pip3 install pyinstaller 如果不行 pip3 install pyinstaller -i https://pypi.doubanio.com/s ...
- Powershell更新
问题:在vin7电脑启动vagrant up 提示powershell版本过低. 在vin7电脑启动vagrant up 提示powershell版本过低: The version of powers ...
- bat无线热点设置
netsh wlan set hostednetwork mode=allow ssid=happyla key=1234567890netsh wlan start hostednetwork
- SpringBoot整合MyBatis与MySql8.0
一.前言 之前已经有一篇文章讨论过SpringBoot整合MyBatis,因而此篇不在重复累赘,本文主要是最新版的SpringBoot2.0与MyBatis.最新MySQL8.0整合过程中遇到的问题进 ...
- AI保存文件出现了未知错误 (Adobe Illustrator)
可能的原因如下:1 把文件中所有的文字全选,转成曲线,把所有的文字都创建成轮廓2 新建一个页面,把制作的复制到新页面里3 需要把图层全部解锁再保存4 没有权限,设置一下即可5 PRINT SPOOLE ...
- Spring boot配置文件application.properties和bootstrap.properties的区别
spring boot 有两种配置文件 (1)application.properties(application.yml) 系统级别的一些参数配置,这些参数一般是不会变动的 (2)bootstrap ...
- Struts2利用iText导出word文档(包含表格)以提供下载
J2EE ExcelStrutsXML 在公司实习期间,带我的老师让我实现一功能——在显示课表的页面上上点击“导出文件“时能以word文档形式下载课表.将课表导出到excel里的功能他们已经实现了, ...
- 树模型常见面试题(以XGBoost为主)
参考资料: 珍藏版 | 20道XGBoost面试题 推荐系统面试题之机器学习(一) -----树模型 1. 简单介绍一下XGBoost2. XGBoost与GBDT有什么不同3. XGBoost为什么 ...