FileReader的使用方法

根据MDN文档的阐释

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

使用方法：通过构造函数初始化一个FileReader对象

const reader = new FileReader();

常用事件
FileReader.onload事件在读取完成后触发。

常用方法
FileReader.readAsDataURL()开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

简单的React上传文件例子

import React from 'react';

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

    handleUpload(e) {
        console.log(e.target.files[0]);
        const reader = new FileReader();
        // 读取文件内容，结果用data:url的字符串形式表示
        reader.readAsDataURL(e.target.files[0]);
        reader.onload = function(e) {
            console.log(e.target.result);  // 上传的图片的编码
            this.setState({
                previewPic: e.target.result
            });
        }.bind(this);
    }

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