限制文件大小及顯示文件大小（正則表達式

接上篇 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高級程序設計（第三版）