Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

FileReader

FileReader allows Web applications to asynchronously read the contents of files (or raw data buffers) stored on the user’s computer, using File or Blob objects to specify files or numbers to read.

attribute

attribute instructions The return value
readyState Provides the current state of the FileReader read operation. Number. 0: no data has been loaded. 1: Data is being loaded. 2: All read requests are complete
result Returns the contents of the file. This property is valid only after the read operation is complete A string or an ArrayBuffer (depending on which reading method is used)
error Returns an error message while reading the file DOMError

The event processing

The event instructions
onloadstart Triggered when the read operation starts
onprogress Read time trigger
onload Triggered when the read operation is complete
onloadend Fired at the end of a read operation (either successful or failed)
onabort Triggered when the read operation is interrupted
onerror Triggered when an error occurred in the read operation

With event handlers, look at the readyState for each phase:

 <input id="test" type="file" onchange="getFile" />
Copy the code
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);
}
Copy the code

Output result:

methods

methods instructions
abort Cancel the read of the FileReader and readyState will be DONE once triggered.
readAsArrayBuffer Read a Blob or File as an ArrayBuffer object
readAsBinaryString Read Blob or File as the original binary format of the File
readAsDataURL Read Blob or File as a string in data:URL format (Base64 encoded)
readAsText Read Blob or File as content (as a string)
readAsArrayBuffer,readAsBinaryString,readAsDataURL,readAsTextAll four methods are:
  • Receives Blob or File objects
  • When the read is complete, readyState becomes DONE
  • The LoadEnd event is triggered
  • The result is read in the Result property

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

readAsArrayBuffer

readAsBinaryString

readAsDataURL

readAsText

Test code:

<! -- Vue -->
<template>
  <div id="fileUpload">
    <h1>{{readType}}</h1>
    <h4>Read TXT file:<input id="txt" type="file" @change="getFile('txt')" />
    </h4>
    <h4>Read JPG files:<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(` reads.${type}The result is: ',reader.result);
        this[`${type}Res`] = reader.result;
      }
      reader[this.readType](file); }}};</script>
Copy the code

Refer to the link

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