About FileReader

FileReader

FileReader allows a Web application to asynchronously read the contents of a file (or raw data buffer) stored on the user's computer, using a File or Blob object to specify the file or number to be read.

Attributes

Attributes	Description	return value
readyState	Provides the current status of the FileReader during the read operation.	Number. 0: No data has been loaded yet; 1: Data is being loaded; 2: All read requests have been completed
result	Return the contents of the file. This attribute is valid only after the read operation is completed	A string or an ArrayBuffer (depending on which reading method is used)
error	Returns the error message when reading the file	DOMError

Event handling

event	Description
onloadstart	Triggered when the read operation starts
onprogress	Trigger on reading
onload	Triggered when the read operation is complete
onloadend	Triggered at the end of the read operation (may be a success, may be a failure)
onabort	Triggered when the read operation is interrupted
onerror	Triggered when an error occurs in the read operation

Combined with the event processing function, look at the readyState of each stage:

 <input id="test" type="file" onchange="getFile" />

function getFile(){
    
    
   const file = document.querySelector('#test').files[0];
   const reader = new FileReader();
   console.log("readyState = ", reader.readyState)
   reader.onloadstart = ()=>{
    
     console.log("onloadstart readyState = ", reader.readyState) }
   reader.onprogress = ()=>{
    
     console.log("onprogress readyState = ", reader.readyState) }
   reader.onload = ()=>{
    
     console.log("onload readyState = ", reader.readyState) }
   reader.onloadend = ()=>{
    
     console.log("onloadend readyState = ", reader.readyState) }
   reader.readAsDataURL(file);
}

Output result:

method

method	Description
abort	Cancel the read operation of FileReader, after triggering readyState is completed (DONE)
readAsArrayBuffer	Read Blob or File as ArrayBuffer object
readAsBinaryString	Read Blob or File into the original binary format of the file
readAsDataURL	Read Blob or File as a string in data:URL format (base64 encoding)
readAsText	Read Blob or File as content (string form)

readAsArrayBuffer, readAsBinaryString, readAsDataURL, readAsTextFour methods are:

• Receive Blob or File object
• When reading is complete, readyState becomes DONE (completed)
• Trigger loadend event
• Read the result in the result attribute

What are the reading results of these four methods? I prepared a test.txt (with some fake text) and a test.png for testing, and the output results are as follows:

readAsArrayBuffer

readAsBinaryString

readAsDataURL

readAsText

Test code:

<!-- Vue -->
<template>
  <div id="fileUpload">
    <h1>测试方法: {
   
   {readType}}</h1>
    <h4>
      读取txt文件：
      <input id="txt" type="file" @change="getFile('txt')" />
    </h4>
    <h4>
      读取jpg文件：
      <input id="jpg" type="file" @change="getFile('jpg')" />
    </h4>
    <div style="margin-top:20px;">
      <button style="margin:5px;" @click="setReadType('readAsArrayBuffer')" > readAsArrayBuffer </button> 
      <button style="margin:5px;" @click="setReadType('readAsBinaryString')" > readAsBinaryString </button> 
      <button style="margin:5px;" @click="setReadType('readAsDataURL')" > readAsDataURL </button> 
      <button style="margin:5px;" @click="setReadType('readAsText')" > readAsText </button> 
    </div>
  </div>
</template>

<script>
export default {
     
     
  name: "fileUpload",
  data() {
     
     
    return {
     
     
      readType:'readAsArrayBuffer'
    };
  },
  methods: {
     
     
    setReadType(type){
     
     
      this.readType = type;
      document.querySelector('#txt').value = '';
      document.querySelector('#jpg').value = '';
    },
    getFile(type){
     
     
      const file = document.querySelector(`#${
       
       type}`).files[0];
      const reader = new FileReader();
      reader.onload = ()=>{
     
     
        console.log(`读取.${
       
       type} 结果如下：`,reader.result);
        this[`${
       
       type}Res`] = reader.result;
      }
      reader[this.readType](file);
    }
  }
};
</script>

Reference link:
MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader