fileReader

最近作的 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便可显示。 `