1、file轉(zhuǎn)base64具體代碼
// 圖片file轉(zhuǎn)base64方法(file文件,回調(diào)函數(shù))
fileToBase64(file, callback) {
// 創(chuàng)建FileReader對象(不兼容IE)
let reader = new FileReader();
// 將file轉(zhuǎn)為base64 (異步操作)
reader.readAsDataURL(file);
// 轉(zhuǎn)換成功
reader.onload = () => {
const response = {
status: true,
data: reader.result
}
callback(response);
};
// 轉(zhuǎn)換失敗
reader.onerror = function () {
const response = {
status: false,
data: reader.error
}
callback(response);
};
}
// 調(diào)用方法
fileToBase64(imgFile, (res) => {
if(res.status) {
console.log('file轉(zhuǎn)化成base64成功---',res.data)
} else {
console.log('file轉(zhuǎn)化base64失敗---',res.data)
}
})
2、原理解析
? 上面封裝的方法,其原理主要是借助FileReader
對象來實(shí)現(xiàn)圖片格式的轉(zhuǎn)換,FileReader
對象中的readAsDataURL()
方法,可以讀取一個File
或Blob
類型的文件,并將其轉(zhuǎn)換為base64格式的字符串。但要注意的一點(diǎn)是:我們通過readAsDataURL()
方法去讀取一個文件時,屬于異步操作,因此我們需要在FileReader
對象的onload事件或onerror事件中,通過回調(diào)函數(shù)的方式,將文件類型轉(zhuǎn)換的結(jié)果,傳遞給方法的調(diào)用者。
? 還有最重要的一點(diǎn):該方法不兼容IE。
3、FileReader
對象
? FileReader
對象可以異步的讀取用戶計(jì)算機(jī)上文件,但僅限于以安全的方式(通過<input>
、DataTransfer
等方式獲取文件后),讀取對應(yīng)的File
或Blob
類型的文件,并不能按照文件路徑去用戶的存儲的讀取對應(yīng)文件。
瀏覽器兼容性:
① 創(chuàng)建FileReader
對象的方法只有一種,那就是構(gòu)造函數(shù):
// 創(chuàng)建FileReader對象
let reader = new FileReader();
② 常用屬性
? error
:表示當(dāng)讀取文件發(fā)生錯誤時,返回的錯誤信息。
? readyState
:表示目前FileReader
對象的狀態(tài),值有三個:0—未讀取任何數(shù)據(jù)、1—正在讀取數(shù)據(jù)、2—數(shù)據(jù)讀取完成或被終止。
? result
:表示文件讀取并轉(zhuǎn)換格式后的結(jié)果,結(jié)果的格式取決于使用的讀取方法。
③ 對象事件
? onload
:該事件在讀取操作完成時觸發(fā),此時可以通過reader.result
拿到文件讀取并轉(zhuǎn)換格式后的結(jié)果。
? onerror
:該事件在讀取操作才發(fā)生錯誤時觸發(fā)此時可以通過reader.error
拿到對應(yīng)的錯誤信息。
? onabort
:該事件在讀取操作被中斷時觸發(fā)。
④ 常用方法
? readAsDataURL(file)
:讀取一個file或Blob文件,并將其轉(zhuǎn)換為base64
格式,存儲在reader.result
。
? readAsArrayBuffer(file)
:讀取一個file或Blob文件,并將其轉(zhuǎn)換為ArrayBuffer
格式,存儲在reader.result
。
? readAsText(file[,encoding])
:讀取一個file或Blob文件,并將其按照第二個參數(shù)設(shè)置的編碼類型轉(zhuǎn)換為字符串格式(默認(rèn)為UTF-8格式),存儲在reader.result
。
? abort()
:終止正在進(jìn)行的讀取操作。文章來源:http://www.zghlxwxcb.cn/news/detail-405618.html
4、相關(guān)文檔
FileReader
前端借助Canvas實(shí)現(xiàn)壓縮圖片兩種方法
前端將base64圖片轉(zhuǎn)換成file文件文章來源地址http://www.zghlxwxcb.cn/news/detail-405618.html
到了這里,關(guān)于前端FileReader對象實(shí)現(xiàn)圖片file文件轉(zhuǎn)base64的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!