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基础语法16 面向对象3 组合,封装,访问限制机制,内置装饰器property
组合: 夺命三问: 1.什么是组合? 组合指的是一个对象中,包含另一个或多个对象. 2.为什么要用组合? 减少代码的冗余. 3.如何使用组合? 耦合度: 耦: 莲藕 ---> 藕断丝连 - 耦合 ...
- VIJOS-P1146 宿舍里的故事之五子棋
洛谷 P1479 宿舍里的故事之五子棋 洛谷传送门 JDOJ 1311: VIJOS-P1146 宿舍里的故事之五子棋 JDOJ传送门 题目描述 宿舍里好多好多有趣的事! 7890653今天看到不知何 ...
- jsp获取map
1.简单Map User user = new User(); user.setName("zmy"); user.setAge(); user.setBirthday(new D ...
- 【myBatis】Error evaluating expression ‘’. Return value () was not iterable.
被遍历的foreach不是数组或者集合
- 非vue等框架中html 中使用es6的模块用法小结
以下是html中使用es6模块化引入的方法 一.html中的引入 <!DOCTYPE html> <html lang="en"> <head> ...
- plv8 + hashids 生成短连接id
此文章是转载文章的一个学习,稍有改动 环境准备 plv8 环境 version: '3.6' services: postgres: image: dalongrong/plv8:2.3.12 ...
- [PHP] layui实现多图上传,图片自由排序,自由删除
实现效果如下图所示: 实现代码: css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: ; } .pic ...
- 【JZOJ6239】【20190629】智慧树
题目 一颗\(n\)个节点的树,每个点有一个权值\(a_i\) 询问树上连通块权值之和对 \(m\) 取模为$ x $ 的方案数 答案对\(950009857\) 取模,满足\(m | 9500098 ...
- 从零和使用mxnet实现softmax分类
1.softmax从零实现 from mxnet.gluon import data as gdata from sklearn import datasets from mxnet import n ...
- 获取最新的中国IP的脚本,给ROS可以使用的脚本
wget http://ftp.apnic.net/apnic/stats/apnic/delegated-apnic-latestecho "/ip firewall address-li ...