根据MDN文档的阐释
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
使用方法：通过构造函数初始化一个FileReader对象
const reader = new FileReader();1
常用事件
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"> <input type="file" className="file" onChange={this.handleUpload} /> <div><img src={previewPic} alt="" style={{width: '70px' }} /></div> </div> ) } }
1234567891011121314151617181920212223242526272829303132333435
