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)行的讀取操作。

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)！