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即可显示。
`

转载于:https://www.cnblogs.com/chengyunshen/p/10512157.html