1、base64轉(zhuǎn)成file具體代碼
// base64圖片轉(zhuǎn)file的方法（base64圖片, 設(shè)置生成file的文件名）
function base64ToFile(base64, fileName) {
// 將base64按照 , 進(jìn)行分割 將前綴 與后續(xù)內(nèi)容分隔開
let data = base64.split(',');
// 利用正則表達(dá)式 從前綴中獲取圖片的類型信息（image/png、image/jpeg、image/webp等）
let type = data[0].match(/:(.*?);/)[1];
// 從圖片的類型信息中 獲取具體的文件格式后綴（png、jpeg、webp）
let suffix = type.split('/')[1];
// 使用atob()對(duì)base64數(shù)據(jù)進(jìn)行解碼 結(jié)果是一個(gè)文件數(shù)據(jù)流 以字符串的格式輸出
const bstr = window.atob(data[1]);
// 獲取解碼結(jié)果字符串的長度
let n = bstr.length
// 根據(jù)解碼結(jié)果字符串的長度創(chuàng)建一個(gè)等長的整形數(shù)字?jǐn)?shù)組
// 但在創(chuàng)建時(shí) 所有元素初始值都為 0
const u8arr = new Uint8Array(n)
// 將整形數(shù)組的每個(gè)元素填充為解碼結(jié)果字符串對(duì)應(yīng)位置字符的UTF-16 編碼單元
while (n--) {
// charCodeAt()：獲取給定索引處字符對(duì)應(yīng)的 UTF-16 代碼單元
u8arr[n] = bstr.charCodeAt(n)
}
// 利用構(gòu)造函數(shù)創(chuàng)建File文件對(duì)象
// new File(bits, name, options)
const file = new File([u8arr], `${fileName}.${suffix}`, {
type: type
})
// 將File文件對(duì)象返回給方法的調(diào)用者
return file;
}
// 調(diào)用方法 此時(shí)的base64是初始file轉(zhuǎn)換的
const file = base64ToFile(base64,'base64轉(zhuǎn)file生成的文件')
console.log('base64轉(zhuǎn)回file的---',file);
// 將轉(zhuǎn)換后獲得的file文件顯示在頁面的img元素上
document.querySelector('#img').src = window.webkitURL.createObjectURL(file)
文件轉(zhuǎn)換過程：
2、代碼解析
? 該方法涉及知識(shí)點(diǎn)較多，首先因?yàn)閎ase64的前綴信息部分與文件內(nèi)容部分是通過,進(jìn)行連接的，data:image/***;base64(前綴信息),xxxxx(文件內(nèi)容)，所以利用split()方法對(duì)base64進(jìn)行分割，將前綴文件信息，與文件內(nèi)容分隔開。得到文件前綴信息后，我們就可以利用string.match()方法結(jié)合正則表達(dá)式，從前綴中獲取到文件的類型信息（image/png、image/jpeg、image/webp）以及具體的格式后綴（png、jpeg、webp），保存這些信息，在創(chuàng)建file文件時(shí)使用。
? 接下來我們要對(duì)文件內(nèi)容部分進(jìn)行處理，借助window.atob()方法對(duì)base64文件數(shù)據(jù)進(jìn)行解碼，獲取原來的文件數(shù)據(jù)流信息，但是以字符串的格式輸出。然后利用new Uint8Array(length)創(chuàng)建一個(gè)與文件數(shù)據(jù)流字符串長度相同的8位無符號(hào)的整型數(shù)字?jǐn)?shù)組，通過該方法創(chuàng)建的整形數(shù)組，所有元素初始值都為0。再通過while循環(huán)將剛才創(chuàng)建的整形數(shù)組中的元素，按照索引替換成文件數(shù)據(jù)流字串符中對(duì)應(yīng)位置上字符的 UTF-16 代碼單元，string.charCodeAt(index)可以獲取字符串對(duì)應(yīng)index位置字符的 UTF-16 代碼單元，值是位于0~65535之間的整數(shù)數(shù)字。
? 最后我們通過File(bits, name, options)構(gòu)造函數(shù)，傳入對(duì)應(yīng)的參數(shù)創(chuàng)建一個(gè)新的file對(duì)象后，返回給方法的調(diào)用者。至此，完成了base64到file文件的轉(zhuǎn)換。
3、base64
? 一個(gè)完整的base64圖片，包含兩部分信息的，一部分是文件前綴信息，一部分是表示文件內(nèi)容信息，例如：data:image/***(表示文件的類型);base64(表示格式),xxxxx(表示文件內(nèi)容)。我們?cè)赽ase64轉(zhuǎn)換為file的過程中，只需要對(duì)文件內(nèi)容信息進(jìn)行轉(zhuǎn)換即可，但轉(zhuǎn)換后的file文件類型屬性，需要通過文件前綴信息來決定。
紅線標(biāo)注部分為文件前綴信息，其余部分為文件內(nèi)容：
4、window.atob()和window.btoa()
? window.btoa()方法可以將一個(gè)二進(jìn)制字符串進(jìn)行編碼為base64編碼的ASCII 字符串。我們可以使用這個(gè)方法對(duì)可能遇到通信問題的字符串進(jìn)行編碼處理，但是有一點(diǎn)要注意：該方法不能對(duì)中文字符進(jìn)行編碼處理，只能對(duì)英文字母、英文符號(hào)和數(shù)字進(jìn)行編碼處理。
? window.atob()方法可以對(duì)經(jīng)過base64編碼的字符串進(jìn)行解碼處理，可以將window.btoa()編碼后的數(shù)據(jù)，進(jìn)行還原；也可以將bsae64格式的文件，解碼成原本的文件數(shù)據(jù)流信息。
注： window.atob()和window.btoa()兼容IE9以上瀏覽器。
如果想要實(shí)現(xiàn)對(duì)中文字符的編碼和解碼處理，則需要結(jié)合encodeURIComponent()和decodeURIComponent()方法：
編碼的過程： 中文字符 —> 先encodeURI —> 再btoa編碼
解碼的過程： 先atob解碼 —> 再decodeURI —> 中文字符
5、File()
? File(bits, name[, options])方法是File對(duì)象的構(gòu)造函數(shù)，擁有兩個(gè)必填參數(shù)和一個(gè)可選參數(shù)：
? 第一個(gè)參數(shù)bits（必填），表示文件的內(nèi)容，可以是包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 對(duì)象的 Array ，以及任何這些對(duì)象的組合；
? 第二個(gè)參數(shù)name（必填），表示創(chuàng)建的file對(duì)象的name屬性，也就是文件的名字。
? 第三個(gè)參數(shù)是options（可選），是一個(gè)對(duì)象格式的參數(shù)，表示文件的可選屬性，可選屬性有兩條：① type：字符串?dāng)?shù)據(jù)，表示文件的類型（image/png、image/jpeg、image/webp等），默認(rèn)值為""。 ② lastModified：數(shù)值型數(shù)據(jù)，表示文件最后修改時(shí)間的Unix時(shí)間戳，默認(rèn)值為Data.now()。
6、相關(guān)文檔
前端FileReader對(duì)象實(shí)現(xiàn)圖片file文件轉(zhuǎn)base64
Base64
atob()
Uint8Array
match()
chartCodeAt()文章來源：http://www.zghlxwxcb.cn/news/detail-808112.html
File()文章來源地址http://www.zghlxwxcb.cn/news/detail-808112.html
到了這里，關(guān)于前端將base64圖片轉(zhuǎn)換成file文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
