How to use FileReader

According to the explanation of MDN documentation

The FileReader object allows web applications to read asynchronously the contents of files (or raw data buffers) stored on the user's computer, and uses the File or Blob object to specify the file or data to be read.
The File object can be from the FileList object returned by the user after selecting a file on an element, or from the DataTransfer object generated by the drag-and-drop operation, or from the result returned after executing the mozGetAsFile() method on an HTMLCanvasElement.

Usage: Initialize a FileReader object through a constructor

const reader = new FileReader();

Common events
The event is fired after the read is completed.

Common methods
()Start reading content from the specified blob. Once completed, the result property will contain a data: URL-formatted string to represent the contents of the read file.

Simple React upload file example

import React from 'react';

export default class UploadPic extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            previewPic: ''
        };
        this.handleUpload = this.(this);
    }

    handleUpload(e) {
        ([0]);
        const reader = new FileReader();
        // Read the file content, and the result is expressed in the string form of data:url
        ([0]);
         = function(e) {
            ();  //Coding of uploaded pictures
            this.setState({
                previewPic: 
            });
        }.bind(this);
    }

    render() {
        const { previewPic } = this.state;
        return (
            <div id="upload-pic">
                <input type="file" className="file" onChange={this.handleUpload} />
                <div><img src={previewPic} alt="" style={{width: '70px' }} /></div>
            </div>
        )
    }
}