最近做的 react项目中用到了 FileReader 记录一下
`
//首先判断你的浏览器是否支持FileReader接口：
if( typeof FileReader == "undefined" ){
alert( "您的浏览器不支持FileReader！" );
}else{
// do FileReader things
}
`
读取后台返回的流文件并下载，如果状态500表示过期 解析文本。
`
response.blob().then( blob => {
if(typeof FileReader === 'undefined'){
notification.open({
message:'您的浏览器不支持 FileReader，请升级浏览器',
icon: <Icon type="smile" style={{ color: '#108ee9' }} />
})
}
const reader = new FileReader();
reader.addEventListener("loadend", function() {
const resu = JSON.parse(reader.result);
if(resu.code == 500){
notification.open({
message:resu.msg,
icon: <Icon type="smile" style={{ color: '#108ee9' }} />
})
}else{
downloadBlob(blob);
}
});
reader.readAsText(blob,'utf-8');
//下载
function downloadBlob(blob){
let blobUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
let filename = options.Name;
a.href = blobUrl;
a.download = filename;
a.click();
window.URL.revokeObjectURL(blobUrl);
}
})
`
API
`
FileReader有四个方法，三个用来读取文件，一个用来中断读取：
方法：abort
参数：无
作用：中断读取
方法：readAsBinaryString
参数：file
作用：将文件读取为二进制码（打印出来在页面上是一堆乱码，二进制麽！）
方法：readAsDataURL
参数：file
作用：将文件读取为DataURL（本例中用的就是这个方法，result就是文件的base64字符，DataURI）
方法：readAsText
参数：file, [optional] in DOMString encoding（第二个参数是文本的编码方式，默认UTF-8）
作用：将文件读取为文本（读取的结果就是这个文本文件中的内容）
此外，FileReader还包含了一套完整的事件模型，用来捕获读取文件时的状态：
事件：onabort
描述：读取中断时触发
事件：onerror
描述：出错时触发
事件：onload
描述：文件读取成功完成时触发
事件：onloadend
描述：读取完成时触发，不论读取成功还是失败
事件：onloadstart
描述：读取开始时触发
事件：onprogress
描述：读取中
文件一旦被读取，不论成功还是失败，
实例（var reader = new FileReader）的result属性都会被填充。
如果读取失败，result的值就是null，
如果读取成功，result的值就是读取的结果。
`
上传文件
`
在页面结构里，我们需要给一个input用来上传文件：
则在支持FileReader的浏览器里就可以这样写：
document.getElementById("File").addEventListener("change", readFile, false);
这是在监听input的change事件，一旦选择了文件，触发了change事件，即刻调用readFile方法。
besides，如果是上传图片，
我们在结构里可以再给一个img：用来放置上传的图片。
由此我们也顺便实现了在图片发送之前即显示在页面上的功能。
现在定义这个关键的readFile方法：
function readFile(){
var file = this.files[0]; //input
if( file.size > 510241024 ){ //用size属性判断文件大小不能超过5M
alert( "你上传的文件太大了！" )
}else{
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var res = this.result;
$("#Img").attr("src", res);
}
}
}
注意，这里的this.result是把文件转换为base64后的字符串，
如果是图片，则赋值给img的src即可显示。
`