限制檔案大小及顯示檔案大小（正規表示式

叫我王珩hénghénghéng發表於2019-03-17

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

相關文章