快捷導(dǎo)航

JS前端文件讀取FileReader操作方法總結(jié)

更新時(shí)間：2024年08月07日 09:39:25 作者：yqdidy

FileReader?包含了一套完整的事件模型,用于捕獲讀取文件時(shí)的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于JS前端文件讀取FileReader操作方法的相關(guān)資料,需要的朋友可以參考下

FileReader

FileReader 是一個(gè)對(duì)象，允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

構(gòu)造函數(shù)：

let reader = new FileReader(); // 沒(méi)有參數(shù)

主要方法

readAsArrayBuffer(blob)

將數(shù)據(jù)讀取為二進(jìn)制格式的 ArrayBuffer。當(dāng)讀取操作完成時(shí)，readyState 變成 DONE（已完成），并觸發(fā) loadend 事件，同時(shí) result 屬性中將包含一個(gè) ArrayBuffer 對(duì)象以表示所讀取文件的數(shù)據(jù)。

reader.readAsArrayBuffer(blob)

readAsText(blob, [encoding])

將數(shù)據(jù)讀取為給定編碼（默認(rèn)為 utf-8 編碼）的文本字符串。

instanceOfFileReader.readAsText(blob[, encoding]);

readAsDataURL(blob)

讀取二進(jìn)制數(shù)據(jù)，并將其編碼為 base64 的 data url。

reader.readAsDataURL(blob);

讀取方法都是異步的，也就是說(shuō)只有當(dāng)執(zhí)行完成后才能夠查看到結(jié)果，如果直接查看是無(wú)結(jié)果的，并返回 undefined。必須要掛載實(shí)例下的 onload 或 onloadend 的方法才能處理轉(zhuǎn)化后的結(jié)果

FileReader的三個(gè)屬性：

error: 返回讀取時(shí)的錯(cuò)誤信息
readyState: 返回操作的當(dāng)前狀態(tài)
result: 返回讀取文件的結(jié)果

讀取文件的示例：

參考 http://www.dbjr.com.cn/javascript/3249569x8.htm

<input type="file" onchange="readFile(this)">

<script>
function readFile(input) {
  let file = input.files[0];

  let fileReader= new FileReader();

  fileReader.readAsText(file);
  // 或者 fileReader.readAsArrayBuffer(file)
  
  /**
   * 該方法在讀取時(shí)調(diào)用
   */
  fileReader.onloadstart = () => {
      console.log("開(kāi)始讀取")
      console.log(fileReader.readyState)//調(diào)用函數(shù),但還沒(méi)有結(jié)束,返回1
  }
  /**
   * 該方法在讀取成功時(shí)調(diào)用
   */
  fileReader.onload = () => {
      console.log("讀取成功")
      console.log(fileReader.result)
      console.log(fileReader.readyState)//調(diào)用完成,返回2
  }
  /**
   * 該方法在讀取結(jié)束時(shí)調(diào)用
   */
  fileReader.onloadend = () => {
      console.log("讀取結(jié)束")
  }
  /**
   * 讀取過(guò)程中觸發(fā)
   */
  fileReader.onprogress = (e) => {
      console.log("讀取中")
      //獲取已經(jīng)加載的數(shù)據(jù)量
      console.log("loaded==>" + e.loaded)
  }
  /**
   * 該方法在調(diào)用abort函數(shù)時(shí)觸發(fā)
   */
  fileReader.onabort = () => {
      console.log("操作終止")
  }
  //當(dāng)讀取出現(xiàn)失敗時(shí)觸發(fā)
  fileReader.onerror = () => {
      console.log("出現(xiàn)錯(cuò)誤")
      console.log(fileReader.error)
  }
}
</script>

read 方法的選擇tips：

readAsArrayBuffer —— 用于二進(jìn)制文件，執(zhí)行低級(jí)別的二進(jìn)制操作。對(duì)于諸如切片（slicing）之類(lèi)的高級(jí)別的操作，F(xiàn)ile 是繼承自 Blob 的，所以可以直接調(diào)用它們，而無(wú)需讀取。
readAsText —— 用于文本文件，當(dāng)我們想要獲取字符串時(shí)。
readAsDataURL —— 用于在 src 中使用此數(shù)據(jù)，并將其用于img 或其他標(biāo)簽時(shí)。
還有一種用于此的讀取文件的替代方案：URL.createObjectURL(file)。

示例：根據(jù)用戶傳入的圖片文件,來(lái)生成一個(gè)對(duì)應(yīng)的臨時(shí)url,并將臨時(shí)url作為src傳給img標(biāo)簽

<input type="file" id="file">
<img  id="img">

let file = document.getElementById("file")
let img= document.getElementById("img")
file.addEventListener("change", (e) => {
    let fileList=e.target.files
    //先獲取一份文件
    //這里獲取的才是File對(duì)象
    let file = fileList[0]
    //因?yàn)閒ile也是Blob對(duì)象,所以直接傳入即可
    img.src=URL.createObjectURL(file)
})

主要事件

讀取過(guò)程中，有以下事件：

loadstart —— 開(kāi)始加載。
progress —— 在讀取過(guò)程中出現(xiàn)，當(dāng)FileReader讀取數(shù)據(jù)時(shí)，進(jìn)度事件會(huì)定期觸發(fā)。
load —— 讀取完成時(shí)觸發(fā)，沒(méi)有 error。
abort —— 在中止讀取時(shí)會(huì)觸發(fā) abort 事件：例如程序調(diào)用 abort()。。
error —— 出現(xiàn) error時(shí)觸發(fā)。
loadend —— 讀取完成，無(wú)論成功還是失敗。

讀取完成后，可以通過(guò)以下方式訪問(wèn)讀取結(jié)果：

reader.result 是結(jié)果（如果成功）
reader.error 是 error（如果失?。?。

檢測(cè)瀏覽器對(duì) FileReader 的支持：

if(window.FileReader) {
  var fr = new FileReader();
  // add your code here
}else {
  alert("Not supported by your browser!");
}

React + antd Upload 組件示例

場(chǎng)景：表單文件上傳，讀取后以base64格式與表單一起傳給后端。

<Upload
  maxCount={1}
  accept=".jpg,.jpeg,.png"
  beforeUpload={(file) => {
    console.log('文件類(lèi)型', file.type, file);
    // 限制文件類(lèi)型
    const allowTypes = [
      'image/png',
      'image/jpeg',
      'image/jpg',
    ];
    const isAllowType = allowTypes.includes(file.type);
		// 校驗(yàn)文件大小和類(lèi)型
    if (!isAllowType || file.size / 1024 / 1024 > 4) {
      message.error('文件格式大小錯(cuò)誤');
      return Upload.LIST_IGNORE;
    }
    const reader = new FileReader();
    //將上傳的文件讀取成base64
    reader.readAsDataURL(file);
    reader.onloadend = function () {
    	console.log('文件Base64內(nèi)容',reader.result, file);
    };
    // 阻止上傳，為了最后和表單一起提交
    return false;
  }}
>
  <Button icon={<UploadOutlined />} type="primary">
    文件上傳
  </Button>
</Upload>