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