背景

使用搜狗截圖功能截圖并復(fù)制到輸入框，發(fā)現(xiàn)圖片是base64類型。使用 FormData 傳輸圖片到后端，查 MDN 發(fā)現(xiàn) FormData.append() 對(duì)第二個(gè)參數(shù)類型有限制。

formData.png

因此決定把base64轉(zhuǎn)為Blob。

什么是Blob

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。。Blob是一個(gè)大文件，典型的Blob是一張圖片或一個(gè)聲音文件，由于它們的尺寸，必須使用特殊的方式來處理（例如：上傳、下載或者存放到一個(gè)數(shù)據(jù)庫(kù)）。

base64轉(zhuǎn)Blob

使用搜狗截圖工具截圖之后的base64是這樣的：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN0AAACWCAYAAABaW421AAABt0lEQVR4nO3TMQEAMAyAsPo3vbpgRxMFPMwDUvM7AK4xHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EDMdxEwHMdNBzHQQMx3ETAcx00HMdBAzHcRMBzHTQcx0EFtMrhBF9pJRCAAAAABJRU5ErkJggg==

在逗號(hào)前面包含圖片的類型，需要截取逗號(hào)前部分并使用正則表達(dá)式獲取mime。

    let arr = url.split(',')
    let mime = arr[0].match(/:(.*);/)[1] 
    // arr[0].match(/:(.*);/)  =>  Array [ ":image/png;", "image/png" ]

逗號(hào)后面是base64編碼字符串，window對(duì)象提供了一個(gè)用于解碼base64的方法 window.atob()，解碼后（如果用字符串轉(zhuǎn)base64再用atob轉(zhuǎn)回來還是字符串）是一串 Unicode 編碼。

    let bstr = window.atob(arr[1])

接著使用charCodeAt把每個(gè) Unicode 編碼存放到 Unit8Array 中。

    let n = bstr.length,
        u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }

最后使用 Blob構(gòu)造函數(shù) 生成一個(gè)blob對(duì)象。

    return new Blob([u8arr], { type: mime })

返回的Blob是這樣的：

    Blob { size: 404, type: "image/png" }

因?yàn)閳D片上傳涉及改名稱（防止命名沖突，以及攜帶一些個(gè)人信息）以及后端方便操作，所以需要把 blob 轉(zhuǎn)為 file。

Blob轉(zhuǎn)file

文件(file) 接口提供有關(guān)文件的信息，并允許網(wǎng)頁(yè)中的 JavaScript 訪問其內(nèi)容。

通過 <input type="file"/> 選擇圖片得到的file對(duì)象是這樣的：

   File { 
       name: "1693837573fb05f8.jpg", 
       lastModified: 1576769913928, 
       webkitRelativePath: "", 
       size: 18657, 
       type: "image/jpeg" 
   }

對(duì)比File和Blob，發(fā)現(xiàn)File多出 name、lastModified 和 webkitRelativePath 三大屬性，其中 webkitRelativePath 不需要。

    // 接著上面的return , 多blob加入文件名和修改時(shí)間
    let nBlob = new Blob([u8arr], { type: mime })
    nBlob.lastModifiedDate = new Date()
    nBlob.name = fileName
    return nBlob

結(jié)語(yǔ)

base64轉(zhuǎn)File涉及到的內(nèi)容點(diǎn)還是蠻多的，其中比較關(guān)鍵的是base64轉(zhuǎn)為blob對(duì)象這一步，window對(duì)象提供的atob實(shí)在方便。其中也發(fā)現(xiàn)了自己對(duì) Uint8Array 的操作和Unicode并不熟悉。