限制文件大小及显示文件大小（正则表达式

接上篇 elementui upload组件 上传视频到七牛云 上次咱们自己对文件大小进行限制，写的比较粗糙，咱们这次来优化一下

文件大小我们可以通过beforeAvatarUpload(file) 函数接收到的file中 file.size获取（这里试验了下我们获取的是比特单位，需要我们转码成对应的单位）

这次我们使用正则表达式来解决

首先，查一下基础的概念

正则表达式修饰符

字符	含义
i	执行不区分大小写的匹配
g	执行一个全局匹配，简言之，即找到所有的匹配，而不是在找到第一个之后就停止
m	多行匹配模式，和上面一样不会找到立即停止，一行找完会找下一行

正则表达式的字符类

字符	匹配
[...]	方括号内的任意字符
[^...]	不在方括号内的任意字符
.	除换行符和其他Unicode行终止符之外的任意字符
\w	任意ASCII字符组成的单词，等价于[a-zA-Z0-9]
\W	任意非ASCII字符组成的单词，等价于[^a-zA-Z0-9]
\s	任意Unicode空白符
\S	任意非Unicode空白符的字符，注意\w和\S不同
\d	任何ASCII数字，等价于[0-9]
\D	除了ASCII数字之外的任何字符，等价于[^0-9]
[\b]	退格直接量（特例）

正则表达式的重复字符语法

字符	含义
{n,m}	匹配前一项至少n次，但不能超过m次
{n,}	匹配前一项n次或者更多次
{n}	匹配前一项n次
?	匹配前一项0次或者1次，也就是说前一项是可选的，等价于{0,1}
+	匹配前一项1次或者多次，等价于{1,}
*	匹配前一项0次或多次，等价于{0,}

模式匹配的String方法

方法名	用途
search()	匹配后返回对应位置
replace()	替换匹配到的内容
match()	匹配后返回对应字符串为数组
exec()	类似match()，未匹配到返回null

基本概念还有很多，我们这次能用到的基本上已经列出来了，下面开工

• 首先我们了解一下换算单位

1 Byte（B） = 8 bit 1 Kilo Byte（KB） = 1024B 1 Mega Byte（MB） = 1024 KB 1 Giga Byte （GB）= 1024 MB 1 Tera Byte（TB）= 1024 GB 1 Peta Byte（PB） = 1024 TB 1 Exa Byte（EB） = 1024 PB 1 Zetta Byte（ZB） = 1024 EB 1Yotta Byte（YB）= 1024 ZB 1 Bronto Byte（BB） = 1024 YB 1Nona Byte（NB）=1024 BB 1 Dogga Byte（DB）=1024 NB 1 Corydon Byte（CB）=1024DB

知道了这些我们拿到文件大小就能换算

• 大于1024k我们就显示未MB，小于则显示K

showSize(val) {
    const size = val / 1024
    if (size > 1024) {
        const MB = (size / 1024).toFixed(2)
        return `${MB}MB`
    }
    return `${size.toFixed(2)}KB`
},
复制代码

接下来我们使用正则表达式来动态限制文件大小

• 获取要限制的单位，我们使用match()

这里要注意match()返回的是数组不是字符串，后面我们还要对单位做处理

const regUnit = /\D+/g // 这里有漏洞，会获取空格及除了数字外其他字符
const unit = maxSize.match(regUnit)
复制代码

所以应该使用

const regUnit = /[a-z]+/gi
const unit = maxSize.match(regUnit)
复制代码

/[a-z]+/gi [a-z]匹配从a到z字符，至少匹配一个 g全局匹配匹配多个 i不区分大小写防止mB、Mb类似这种

• 获得限制文件的数

const regNum = /\d+/g
const num = maxSize.match(regNum) * 1 // 快速把Array转为Number
复制代码

• 写成一个函数，接收两个参数，限制的大小以及传入文件的大小

limitFileSize(maxSize, fileSize) {
    const regUnit = /[a-z]+/gi
    const regNum = /\d+/g
    const unit = maxSize.match(regUnit)
    const num = maxSize.match(regNum) * 1
    switch (unit && unit.toString().toLowerCase()) { //把单位转为字符串且统一为小写
        case 'k':
        case 'kb':
            return fileSize / 1024 < num
        case 'm':
        case 'mb':
            return fileSize / 1024 / 1024 < num
        case 'g':
        case 'gb':
            return fileSize / 1024 / 1024 / 1024 < num
        default:
            break
    }
},
复制代码

• 大功告成

参考文献 JavaScript权威指南（第六版） JavaScript高级程序设计（第三版）

转载于:https://juejin.im/post/5c8df607e51d4536a705ae3c