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

接上篇 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高级程序设计（第三版）